Vertical Alignment of Column Rows in Bootstrap Grid

Bootstrap grid: vertical alignment issue in columns

If the order of the HTML items can be changed (which you can do), then there are 2 ways to do this.

1. Use 2 columns instead of multiple columns

Create 2 columns and put half of the items in the first column and half in the second. This is how the answer you linked to does it and you said you couldn't do that, but it is the only way if you want to use the grid.

Run the snippet to see it in action: (Note: I have changed 'col-sm-12' to col-sm-6 just so that you can see the effect when you run the snippet)

.row.no-gutters p { background:#eee; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<p class="footer-title">NOS SOCIÉTÉS</p><div class="row no-gutters">    <div class="col-lg-6 col-sm-6">        <p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p>        <p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p>        <p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p>        <p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p>        <p><a href="#">Jaenicke</a><span> - Guebwiller</span></p>        <p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p>        <p><a href="#">René Graf</a><span> - Colmar</span></p>    </div>    <div class="col-lg-6 col-sm-6">        <p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p>        <p><a href="#">Graf Services Plus</a><span> - Colmar</span></p>        <p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p>        <p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p>        <p><a href="#">Vivale</a><span> - Turckheim</span></p>        <p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p>        <p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p>    </div></div>

Bootstrap: How to center content vertically within a column

You can use flexbox. Make your outer div, display: flex and use The property align-items to make it's contents vertically center. Here is the code:

#outerDiv{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

Bootstrap vertical align a row in a col

You can use CSS Flexbox.

Make the .row a flex container and use align-items property to vertically center the content. Just like:

.row {
  display: flex;
  align-items: center;
}

Have a look at the snippet below (use full screen for preview):

body {  padding-top: 50px;}
.row {  display: flex;  align-items: center;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid">    <div class="row">        <div class="col-md-2">            <img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class="">        </div>        <div class="col-md-10">            <div class="col-md-4">                <div class="row">                    <div class="col-md-12" contenteditable="false">Justin Bieber</div>                </div>                <div class="row">                    <div class="col-md-12">Baby</div>                </div>            </div>            <div class="col-md-8">                <div class="row">                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span>
                    </div>                    <div class="col-md-2"><span class="glyphicon glyphicon-play"></span>
                    </div>                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span>                     </div>                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span>
                    </div>                    <div class="col-md-2"><span class="glyphicon glyphicon-random"></span>
                    </div>                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span>
                    </div>                </div>            </div>        </div>    </div></div><!-- /.container -->

How to vertically align content inside a column with Bootstrap 4

NishargShah is correct about using Flexbox. Bootstrap was redesigned around Flexbox, and that is the core change from Bootstrap3 to Bootstrap4 (there are many other changes, but the switch from Floats to Flexbox is the core change).

However, there is a simpler way to do this:

Change:

  <div class="col-8 bg-dark m-2">
    TEXT
  </div>

to:

  <div class="col-8 bg-dark m-2 d-flex align-items-center">
    TEXT
  </div>

Modified jsFiddle

html, body {
  height: 100%;
  color:white !important;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
</div>

Vertical alignment of columns in bootstrap 4

Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs. But here in your example you haven't used row class or d-flex class in your code.

I suggest you to add row into your code..

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Now your code will center the text vertically, But within the container height. It won't be center to your html page.

Vertical Center: JS Fiddle

To make Your text to center of your page, make row div to full height 100vh

Bootstrap Vertical align in Column

When ever I need to center something in HTML - the css-tricks guide is always help me to do so.
I suggest you read and save it for next time you need to center something!

For your question, you can achieve the desired result using flexbox -
Set the .vcenter display to flex, so you can use the align-items property.

.jumbotron__container {  display: flex;  background: #fff;}
.jumbotron__text {  flex: 1 0 50%;  padding: 10px;  border-right: 1px solid black;}
.jumbotron__image {  display: flex;  flex: 1 0 50%;  align-items: center;  justify-content: center;}
<div class="container">        <div class="jumbotron" id="jumbotron-introduction">        <div class="jumbotron__container">          <div class="jumbotron__text">            <h3>Loren And Ipsum</h3>            <p id="p-introduction">Dolum And Smith<p>          </div>          <div class="jumbotron__image">            <img src="Images/..." id="image-introduction">          </div>        </div>        </div>    </div>

Vertical Align Center in Bootstrap 4

Important! Vertical center is relative to the height of the parent

If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!

Now, onto vertical centering...

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).

  • use align-items-center on a flexbox row parent (row or d-flex)
  • use justify-content-center on a flexbox column parent (d-flex flex-column)
  • use my-auto on a flexbox parent

Vertical Center in Bootstrap 5

Bootstrap 4

You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).

Option 1 align-self-center on flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Sample Image

https://codeply.com/go/BumdFnmLuk

Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

More on Bootstrap 4 Vertical Centering

Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

vertical center grid columns

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

See this Q/A to center, but maintain equal height

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

More examples
Vertical center image in <div>
Vertical center .row in .container

Vertical center and bottom in <div>
Vertical center child inside parent

Vertical center full screen jumbotron

Important! Did I mention height?

Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...

body,html {
  height: 100%;
}

Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.

Also see:

Vertical alignment in bootstrap 4

Bootstrap Center Vertical and Horizontal Alignment

React Bootstrap: Vertical alignment of row's columns?

If you are using table rows, you can wrap contents within a <div>..</div>

like:

<tr>
  <div classname="align-me"></div>
</tr>

and then you can use flexbox to align them dynamically:

tr .align-me {
  display: flex;
  align-items: center;
}

Related Topics

How to Use a Material Theme Colors in My CSS in Angular2

How to Make 2 or More Horizontal Divs Stack into a Vertical Div When The User Shrinks The Browser Window

How to Select Nth Child of Specific Tag with CSS

Is There Any Possibilty Using CSS-Variables in Sass

Why Is Blue Circle Not Spinning in The Center of Itself

What CSS Properties Can Be Animated

Place View on Top of Other View in React Native

CSS: Which Is Faster for The Browser? Color:#Fff; or Color:#Ffffff;

Li:Before{ Content: "■"; } How to Encode This Special Character as a Bullit in an Email Stationery

Javafx Project Structure

D3Js Svg Open Lines Display a Fill Artifact, How to Fix It

Mobile Menu Open & Close Buttons Display in Chrome But Not Safari

Can't Load CSS File in Javafx 8

How to Config Workspace in Chrome

How to Style an Independent Tableview Column

CSS Style Not Recognizing Numbers

How to Replace The Web Font with Svg Icon in CSS(Font Awesome)

Image Hover Effect


Leave a reply



Submit