Detailed explanation of Bootstrap grid vertical and horizontal alignment

1. Bootstrap Grid Layout
2. Vertical Alignment

2.1 Set vertical alignment in row tag
2.2 Set vertical alignment in col tag

3. Horizontal alignment

3.1 Set vertical alignment in row tag

1. Bootstrap Grid Layout

In the previous section, we introduced the grid in Bootstrap. The grid is a key point and difficulty in web page layout. Layout is the starting point and foundation of web design. You must spend time to understand it. At least understand the content introduced in the tutorial I wrote, because what I wrote are the most commonly used and basic ones. Of course, for a web designer with a certain foundation, I believe these contents can be understood at a glance. Today we will further learn about grid layout.

This section covers some of the features of the general class Flex.

2. Vertical Alignment

2.1 Set vertical alignment in row tag

By adding align-items-start, align-items-center, and align-items-end to the row tag, you can change the vertical alignment of the row in the container. The above three tags are top alignment, center alignment, and bottom alignment respectively. The following is a demonstration code and effect diagram. The CSS code in the code sets the background color and spacing to facilitate viewing the effect.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>Vertical Alignment Demo</title>
  </head>
  <body>
        <div class="container">

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

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

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

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.2 Set vertical alignment in col tag

You can change the vertical alignment of the column in the row by adding align-self-start, align-self-center, and align-self-end to the col tag. The above three tags are top alignment, center alignment, and bottom alignment respectively. The following is a demonstration code and effect diagram. The CSS code in the code sets the background color and spacing to facilitate viewing the effect.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>Vertical Alignment Demo</title>
  </head>
  <body>
        <div class="container">

          <div class="row align-items-start">
            <div class="col align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3. Horizontal alignment

3.1 Set vertical alignment in row tag

You can change the horizontal alignment of columns in a row by adding justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between, justify-content-evenly to the row tag. The following is a demonstration code and effect diagram. The CSS code in the code sets the background color and spacing to facilitate viewing the effect.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
     .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
      .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
    </style>
    <title>Vertical Alignment Demo</title>
  </head>
  <body>
        <div class="container">

          <div class="row justify-content-start">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-center">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-end">
            <div class="col-4"> </div>
## <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-around">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-between">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-evenly">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>
        </div>

This is the end of this article on the detailed explanation of Bootstrap grid vertical and horizontal alignment. For more relevant content on Bootstrap grid vertical and horizontal alignment, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Implementation of Bootstrap web page layout grid
Bootstrap grid system layout detailed explanation
Analysis of how to use the bootstrap grid system
First contact with the magical Bootstrap grid system
Chapter 4: Bootstrap Grid System Offset Columns and Nested Columns
Chapter 3 Bootstrap Grid Basics
BootStrap3 study notes (I) grid system
The similarities and differences between Bootstrap 3 and Foundation 5 grid systems
Bootstrap Grid System Explained

<<: MySQL 8.0.16 installation and configuration method graphic tutorial under Windows

>>: Docker installs redis 5.0.7 and mounts external configuration and data issues