Issue with Bootstrap: unable to align columns vertically

I am currently learning how to use bootstrap, but I am facing a challenge with vertical alignment of columns. Despite trying various methods, I can't seem to get the content to align anywhere other than the top. Even starting from scratch with code from bootstrap's documentation did not solve the issue. What could I be missing?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435f435d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container text-center">
    <div class="row align-items-end">
      <div class="col">
        should be bottom - One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e524e50">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

To ensure proper alignment of all items within a grid layout, we can utilize various classes

1. To align all text to start of each item, use the class align-items-start

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bca0be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous><
  <title>Document</title>
</head>

<body>
  <div class="container text-center>
    <div class="row align-items-start>
      <div class="col>
        should be bottom - One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d4c8d6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous></script>
</body>

</html>

To vertically center align all items, use the class align-items-center

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e8f4ea">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous><
  <title>Document</title>
</head>

<body>
  <div class="container text-center>
    <div class="row align-items-center>
      <div class="col>
        should be bottom - One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa6baa4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous></script>
</body>

</html>

All text elements can be aligned at the end of the grid using align-items-end class

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c809c82">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous><
  <title>Document</title>
</head>

<body>
  <div class="container text-center>
    <div class="row align-items-end>
      <div class="col>
        should be bottom - One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
      <div class="col>
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e1509150b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous></script>
</body>

</html>

For more information on alignment classes, visit:

https://getbootstrap.com/docs/5.0/utilities/flex/#align-items

Answer №2

If you're seeking the align-items-start class in Bootstrap, you've come to the right place.

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial scale-1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313632053031705352" rel="noopener noreferrer">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container text-center vh-100">
    <div class="row align-items-center h-100">
      <div class="col">
        should be bottom - One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbg7cbd5" rel="noopener noreferrer">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</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 art of controlling iframe elements with jquery

I've been researching various topics related to this issue, but I'm still unable to achieve the desired outcome. Currently, I am embedding an iframe within an HTML document like so: <iframe class="full-screen-preview__frame" id="nitseditpre ...

javascriptjqueryhtmliframe

How can I retrieve the URL of images listed in my CSS file using Python?

I need help extracting all image URLs used in a CSS file. Here is an example snippet from my CSS file: sitewrap { width: 890px; margin: 0 auto; background: #ffffff url(../images/bg_sitewrap.gif) repeat-y; } Can anyone advise on how to extract ...

pythoncss

Opting for HTML tags directly rather than using div.class

On my blogsite, I have implemented special tags that are designed to be user-friendly for my colleagues who may not be familiar with HTML. For instance: <question>...</question> and <answer>...</answer> These tags are then style ...

htmlcross-browser

Having trouble with less.modifyVars not functioning properly in Visual Studio?

I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...

javascriptcssangularjsvisual-studio-2012less

The tag helper named 'option' should not contain any C# code in the element's attribute declaration section

I seem to be encountering a dilemma that has me stumped on finding a solution. <option value="10" @(Model.ItemsTo == 10 ? "selected" : "")>10</option> <option value="25" @(Model.ItemsTo == 25 ? " ...

asp.net-mvcbootstrap-5

Python3 Scraping Printer`s website is malfunctioning when using Selenium

Apologies in advance if my question is not presented correctly or if I have missed any rules. My background is in Network Security Administration, but I have recently started studying Python. After some practice, I attempted to write my first code to retri ...

pythonhtmlselenium

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...

htmlcssbootstrap-4

Is it a bug that using addClass or toggleClass with JQuery inside a click method does not seem to be functioning properly?

This appears to be a simple issue, yet it is not functioning correctly. I managed to make it work by placing the .normal class above the .highlight class, despite only adjusting the position and not altering the style. This lack of logic is puzzling. Sin ...

jquerycssclickaddclasstoggleclass

Customizing your buttons in Wordpress with extra CSS styles upon clicking

I am in the process of developing a Wordpress website and I require a button for switching between mobile and desktop versions manually. Within my .css file, I have included: @media (pointer:coarse) {} This adds modifications for the mobile version ...

javascriptcsswordpressbuttonmobile

The image appears uniquely sized and positioned on every screen it is viewed on

After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seem ...

cssmobilecss-positioncompatibility

Set all form fields to ng-touched programmatically when the form is submitted

HTML: <div class="form-group" ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }"> <label for="firstName" class="control-label"> First Name </label> <input t ...

javascriptangularjstwitter-bootstrapvalidation

Responsive design is achieved through the use of mobile media

I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...

htmlcssmobileresponsive-design

Retrieve the value of an AngularJS expression and display it in a window alert using AngularJS

Hey there, I am in the process of trying to display the value of an expression using AngularJs As a beginner in angular, I am working on figuring out how to retrieve the value of the expression either with an alert or in the console. I'm utilizing A ...

javascriptangularjsjsonhtml

CSS problem: Footer encroaching on the content above

For more information, please visit this link When the window is minimized, the footer overlaps the content above it. Despite spending hours trying to fix this issue, I have not been successful. View when maximized: here View when minimized: here Even af ...

cssoverlap

Certain HTML code on a webpage is currently inaccessible to me

Struggling with web scraping on a webpage due to inaccessible code. The part of the page's code that remains out of reach is only accessible through an anchor tag, with the following html: <a class="MTLink" href="#d192633539-47" title="example" &g ...

htmlweb-scraping

What is the best way to click within a web browser control?

I'm attempting to automate the process of clicking a specific div id button using vb.net. I have integrated a webbrowser for this purpose, and here is my current code snippet. The goal is to click the 'Do Job' button on the website through v ...

htmlvb.netwinformsbuttonwebbrowser-control

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Currently, I am in a situation where I must develop a piece of code that will smoothly enlarge a div from nothing to its final dimensions while simultaneously moving it down from the top of the screen. Each time this action is triggered, the final size of ...

javascriptmathhtmlzoomingslide

Modifying the theme of the Angular UI-Bootstrap datepicker

I am currently facing an issue with my angular datepicker, which is appearing oversized and covering almost 30% of the screen. Additionally, there are large gaps between the dates in the calendar view. After some investigation, I believe this problem may ...

javascriptangularjstwitter-bootstrapdatepicker

Is it possible to style the parent CSS file using a query?

Is it feasible to achieve this, or are there alternative methods to accomplish something similar? In a CSS file, we have the ability to set queries for various screen resolutions, allowing CSS rules to apply only to specific screens. @media (max-width: 76 ...

htmlcsscss-selectors

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...

htmlcss