Vertical & Horizontal Alignment in Bootstrap

Vertical & Horizontal Alignment in Bootstrap
Alignment is of very high importance when constructing layout of pages using Bootstrap. To put it in lay man terms, alignment takes care of the placement of content — left, right, center, top, bottom, between and around. Flexbox makes alignment much easier with bootstrap. Thus, writing custom CSS is not necessary in most cases. Utility classes can be used available in bootstrap.

Most of the time the alignments work within the grid system (.row and.col-*). That is because, the rows by default use Flexbox which is flexible.

1. Horizontal Alignment in Bootstrap

Horizontal alignment determines the transition of columns from left to right inside a row. Bootstrap‘s justify-content-* classes are used for this purpose. They are to be added directly to the.row element.

Main Horizontal Alignment Classes
*justify-content-start

Aligns columns to the left. This is the default.

Renumber each paragraph, sentence within each paragraph, and (if needed) re-number the list items.

text-center Other classes, such as several provided by Bootstrap. For example:

Centers horizontally. You will probably use it most often when you want to put several buttons or cards in the middle.

align-items-center; marginbottom:10px; text-align: center; display: flex justify-content: end; Centering items in the navigation bar:

Shifts columns to the right within the line.

Justify-content-between. This property takes a value of space-between and aligns two elements to each outer side of a container.

Adds space between columns. In this case, the first column will be displaced to the left, the last one to the right.

justify-content-areround

Adds equal spacing around each column; adds (adds a blank line before the column on the left and right).

justify-content-evenly

Distributes equal space before, between, and after columns.

When to Use Horizontal Alignment
For example, horizontal alignment is helpful for:
Button Centering 45 Centering Buttons

Spacing navigation items

“Centering cards”

Crafting balanced compositions

2. Vertical Alignment in Bootstrap

Whereas in horizontal alignment we control movement along the x axis, vertical alignment deals with how columns move vertically inside a row. For this Bootstrap utilises align-items-* classes. Once again, these are applied to the.row.

Main Vertical Alignment Classes
*align-items-start

<div class="row align-items-start">

Aligns columns to the top.

align-items-center

<div class="row align-items-center">

Centers (aligns vertically in the text block). This is extremely useful when designing hero sections.

*align-items-end Vertical bottom is the way of aligning columns—bottom of text will be aligned to column bottom.

<div class="row align-items-end">

Individual Column Vertical Alignment
In some situations, one particular column is supposed to be aligned differently from the rest. For that use, Bootstrap has:

Align-self-start
Align-self-center
Align-self-end.

Example:

<div class=”col align-self-center”>

This has an impact only on that column not the whole row.

3. Text Alignment in Bootstrap

Bootstrap also include a text alignment utility classes. They are used to position the text within elements.

text-end- Line-tops the text to right.
text appear centr – the text will appear as being centered.
text-end – right aligns the text.

Thus, it is very easy to control text positions without additional CSS.

4. Responsive Alignment

Responsively, changing alignments is another strong feature in Bootstrap. Bootstrap offers this option.

Example:

<div class=”row justify-content-md-center”>

This means:
For small screens ->default alignment

For medium and larger screens.–>

You can use responsive breakpoints such as:
-m-

-Md-

-lg-

-xl- 2.1.06; The identification of dominant in a scientific name; and-name building skills ofthe property group members. Each property group member was assigned one of the three three-letter property groups,-xl-2.1.06; Dominant identification for a scientific name,-and- xl-2.1.31; Name building skills ofthe property group members.

The-xx- You rewrite the text “In the upper left-hand corner, “Introduction” is written between the text area and the title of the document.

Consequently, the layouts become more flexible and adapt gently to any devices.

5. Why Bootstrap Alignment is Powerful

There are several reasons why Bootstrap alignment is widely used:

No custom CSS needed

Based on modern Flexbox system

Simple to read and understand

Rendered Responsive:

Saves development time.

Due to these benefits, developers can design neat and professional layouts more quickly.

Quick Summary

Horizontal Alignment:

Justify-content-start
Justify-content-center
Justify-content-end.
Justify-content-between (on the horizontal axis)

We10-justify-content-around: (for a flex container) distributes the free space evenly between the items, and puts the last item at the end of the container; this has the biggest whitespace around each item.

Justify-content-evenly places the grid-items with even space between middle items and the container edges.

Vertical Alignment:

Align-items-start I‘ve been told my writing style sounds more natural, but I‘ve really failed if that‘s the case. I‘m not too worried about it because I understand all the concepts and modes of thought, and the way I write is just a reflection of that.

Align-items-center
Align-items-end
Align-self-* (for each column)

Final Thoughts

Generally speaking, alignment in Bootstrap is straightforward because it is built upon Flexbox classes. You use one combination of horizontal and vertical alignment classes to position your content as you wanted. No advanced CSS rules are needed.