Bootstrap Align Right, Left, and Center: The Complete Tutorial

In this demo I will show how Bootstrap flex, margin, and text align classes can be used to align contents in a div. I will primarily use Bootstrap 5 classes but will also show the Bootstrap 4 equivalent.

Here are all the different examples that we will build:

Bootstrap Align Right, Left, and Center
Bootstrap Align Right, Left, and Center

I will also explore dev tools and see how the Bootstrap alignment classes translate to CSS in dev tools.

Bootstrap Align Right, Left, and Center with Flex

Bootstrap has lots of flex classes available. The most commonly used class is the d-flex class, which applies the display: flex value to an element.

Here is code that creates a right, left, and center aligned pair of div ‘items’:

<div className="container d-flex justify-content-end">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
</div>
<div className="container d-flex justify-content-start">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
</div>
<div className="container d-flex justify-content-center">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
</div>

Here’s how those render:

Bootstrap display flex right, left, and center
Bootstrap display flex right, left, and center

I created the container class simply to make the example look nicer.

The d-flex class applies the following style in dev tools:

.d-flex {
    display: flex !important;
}

I’ve noticed that Bootstrap applies the !important modifier to a lot of its classes.

The first pair of items are right aligned. These are right aligned within a div with the justify-content-end class. As you probably expected, this applies the following justify content style:

.justify-content-end {
    justify-content: flex-end !important;
}

Remember that the justify-content style inside of a flex container will align an item along the primary axis. The flex direction is currently ‘row’, which is the default, so the primary axis is the x-axis. If we used align-items for alignment, that would control vertical (y-axis) alignment.

The left aligned items are aligned within their parent flex div by the justify-content-start class. This class adds justify-content: flex-start !important;. It was not necessary to apply this class since flex-start is the default alignment, but I did it just for an example.

The center aligned items are aligned within their div by the justify-content-center class. This class adds justify-content: center !important;. Here’s how justify-content-center looks in dev tools:

Bootstrap justify-content-center example
Bootstrap justify-content-center example

Here’s how to align Bootstrap Buttons in a grid.

Responsive Flex Alignment

Sometimes we only want to right align or center align items when the screen is wide enough, otherwise we want the divs to stack vertically. In that case, we can use one of Bootstrap’s responsive flex classes.

These classes range from d-sm-flex all the way up to d-xxl-flex. These classes only apply display: flex if the screen exceeds a minimum width.

Here’s an example of using d-sm-flex on a div with two child items. When the screen is equal to or larger than 576px, display: flex is applied:

Bootstrap responsive flex class example
Bootstrap responsive flex class example

Since the flex class is applied, the items are right aligned. This gives us responsive right alignment.

When the screen is below the minimum width, the div loses its flex class and the child divs revert to their default inline styling:

Bootstrap responsive flex class small screen
Bootstrap responsive flex class small screen

Bootstrap Align Multiple Directions in a Div

The flex property gives us the ability to align multiple items in different ways in a single div.

Below are three examples. We can align either two or three items left, center, and right with just a single class:

Bootstrap align left, center, and right with one class
Bootstrap align left, center, and right with one class

As you can see, the second and third rows have different spacing on the ends. Let’s see how we can do this. Take a look at the code below:

<div className="container d-flex justify-content-between">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
</div>
<div className="container d-flex justify-content-between">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
  <div className="item">
    Item 3
  </div>
</div>
<div className="container d-flex justify-content-around">
  <div className="item">
    Item 1
  </div>
  <div className="item">
    Item 2
  </div>
  <div className="item">
    Item 3
  </div>
</div>

The first div has classes d-flex and justify-content-between. Here’s how that renders in dev tools:

Bootstrap justify-content-between class
Bootstrap justify-content-between class

Since there are only two child elements in the flex div, they are aligned all the way to the left and right.

The next div has the same classes but contains three items. Since it has three items, they are perfectly aligned to the left, center, and right, respectively.

The last example div has three items also, but I used class justify-content-around. This class applies justify-content: space-around !important.

The justify-content: space-around property takes all the extra space in a div and evenly divides it by the number of children, times 2. Then each child element gets one block of space on either side of it. This results in the inner siblings having more space around them than the two outer siblings. You can see the result here:

Bootstrap justify-content-around example
Bootstrap justify-content-around example

Bootstrap Align Right, Left, and Center with Margin

Before CSS added flex capabilities, a common method for aligning items was to use margin-left: auto to align an item to the right. To center align an item developers would apply both margin-left: auto and margin-right: auto. (Another method was floating items, but we will not cover that here.)

In previous examples, the children’s layout was controlled through styles at the parent level. However, margin is applied at the child level. We also need either display: flex at the parent level or display: inline and a width at the child level.

Here’s how the DOM looks with margin for right, left, and center alignment:

Bootstrap align right, left, and center with margin classes
Bootstrap align right, left, and center with margin classes

In these three examples, I applied class d-flex to the parent and then a margin class to the child. Shown above is a div with class ms-auto. This is applying margin-left: auto !important styling. We can see that margin-left: auto is filling all the empty space to the left of the div with margin. This is possible because the parent div’s display: flex style makes the child element only take the width that its characters need.

I added a fourth div where the parent does not have a flex class on it:

Bootstrap ms-auto example
Bootstrap ms-auto example

In this demo, the child has display: block implicitly because it is a div. It has width from inline styling and margin-left: auto from the ms-auto class. These are the three styles necessary for automatic left margin to work.

We cannot use display: block and a fixed width to line up two divs in a parent div and display them on the same line with results like justify-content: space-between. Automatic margin only works with display: block, but block layouts only allow one element in a row.

Here is the full code for these examples:

<div className="container d-flex">
  <div className="item ms-auto">
    Item 1
  </div>
</div>
<div className="container d-flex">
  <div className="item me-auto">
    Item 1
  </div>
</div>
<div className="container d-flex">
  <div className="item me-auto ms-auto">
    Item 1
  </div>
</div>
<div className="container">
  <div className="item ms-auto" style={{ width: "80px" }}>
    Item 1
  </div>
</div>

The Bootstrap 4 ml-auto class is equivalent to the Bootstrap 5 ms-auto class. The Bootstrap 4 mr-auto class is equivalent to the Bootstrap 5 me-auto class. Here are the Bootstrap 5 margin docs, and here are some great Bootstrap 3 margin examples.

Bootstrap Align Text Right, Left, and Center

If you only need to align text within a div, check out these great classes:

<div className="container text-end">
  Aligned Text
</div>
<div className="container text-center">
  Aligned Text
</div>
<div className="container text-start">
  Aligned Text
</div>

Here’s how these render:

Bootstrap text align right, center, and left

The Bootstrap text align classes apply the CSS text-align property. Here’s what text-end class does:

.text-end {
    text-align: right !important;
}

In my example I am using Bootstrap 5. The equivalent Bootstrap 4 text-end class name is text-right. The equivalent Bootstrap 4 text-start class name is text-left. The names were changed to support web users who are more comfortable with right-to-left languages.

Here’s how to change the font size for all your Bootstrap divs.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.