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:
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:
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. (Here’s how to left align React-Bootstrap Card images)
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:
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:
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 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:
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:
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 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:
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:
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:
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.
