What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container">
                    <div class="row">
                    <div class="col-lg-12">
                        <div class="news-title">
                        <h3 class="title">NEWS & ARTICLES</h3>
                        </div>
                    </div></div>
                    <div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-1.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">KIOSK</h4>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-2.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">LOREM</h4>                               
                            </div>
                        </div>
                    </div>
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-3.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">IPSUM</h4>                               
                            </div>
                        </div>
                    </div>
                </div>
                </div>

I am struggling to align the title "NEWS & ARTICLES" and the cards vertically in my HTML code. I believe that the specified CSS properties in the div with class "row row-cols-1 row-cols-md-3 g-4" are causing the alignment issue.

Here is a visual representation of how I want the title and cards to align:

https://i.sstatic.net/9uz8M.jpg

Is there a way to achieve this alignment with the provided HTML code?

https://i.sstatic.net/tHkRQ.jpg

htmlcsstwitter-bootstrap

Answer №1

Everything seems to be functioning properly on my end. It's possible that there may be some conflicting CSS in your code causing the issue.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="news-title">
          <h3 class="title">NEWS & ARTICLES</h3>
        </div>
      </div></div>
    <div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">KIOSK</h4>

          </div>
        </div>
      </div>
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">LOREM</h4>                               
          </div>
        </div>
      </div>
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">IPSUM</h4>                               
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides

Having some trouble with an HTML 5 project where the video plays on Chrome and Safari PC browsers but not on iPad. The task at hand is to get it working in portrait mode only, with the video playing when tapped/clicked. <!doctype html> <!--[if ...

javascriptcssipadhtmlhtml5-video

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

javascripthtmlcss

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

The issue with the page width is occurring due to a bug related to the

When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing. However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width return ...

htmlcssaddthis

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Ensuring proper input with JavaScript form validation

Currently, I am working on implementing a basic form validation feature, but it is not functioning as intended. The desired behavior is for the field border to change color to green or red based on its validity, while displaying text indicating whether t ...

javascripthtmlvalidation

What factors should you consider when selecting between Bootstrap and MDBootstrap for your class usage?

My CSS skills are not very advanced. I have been using MDBootstrap for most of the styling on my project, but I am not a fan of its table styling. I would prefer to use the table CSS class from regular Bootstrap instead of MDB. I have both dependencies inc ...

cssbootstrap-5mdbootstrap

Can someone guide me on how to align text to the bottom border of a page?

Is there a way to adjust the position of the header text ("bottom text") so that it appears just above the bottom border of the page? I have attempted modifying styles and classes within the footer, style, and h3 tags but have not had any success. Below ...

htmlcsstextborder

Are there methods to individually style components that have been generated through the .map() function?

My goal is to style each <Tuner /> component separately, which are being rendered for each item in the this.state.notes array using this.state.notes.map(). I want to position them individually on the page, but currently they all appear together. This ...

javascriptcssreactjs

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

javascriptjquerycssinternet-explorer

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

javascriptjquerycssanimation

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

javascriptjqueryhtmlangularjs

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

Issue with the positioning of the datepicker is not functioning properly

I'm currently facing an issue with the position of a date picker plugin from jquery. The search box on my website allows users to select a range of dates using the date picker, but when enabled, the date picker appears at the bottom left corner of the ...

javascriptphpjqueryhtmldatepicker

Video background with alternate image for touchscreen devices

Check out this website! The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small? Here's the code ...

htmlcssvideotabletfallback

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

Is your 100% height not beginning at the top of the page?

The link provided showcases a tutorial that has a white column extending to the bottom of the browser. In this example, the white column begins from the very top, with a header in a different shade of grey covering it. In my scenario, I need the header to ...

css

Can a personalized user permission prompt be designed for HTML5 APIs?

Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...

htmlgeolocationmultiple-browsersgetusermedia

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok