Detailed explanation of Bootstrap grid vertical and horizontal alignment

Detailed explanation of Bootstrap grid vertical and horizontal alignment

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

Recommend

Detailed explanation of padding and abbreviations within the CSS box model

As shown above, padding values ​​are composite at...

Analysis of the situation where js determines and informs the support of CSS attributes (values)

When we want to use a new CSS feature, we always ...

Detailed explanation of how Angular handles unexpected exception errors

Written in front No matter how well the code is w...

Comprehensive analysis of isolation levels in MySQL

When the database concurrently adds, deletes, and...

Three Ways to Find the Longest Word in a String in JavaScript (Recommended)

This article is based on the Free Code Camp Basic...

How to insert Emoji expressions into MySQL

Preface Today, when I was designing a feedback fo...

How to create an Nginx server with Docker

Operating environment: MAC Docker version: Docker...

MySQL table deletion operation implementation (differences between delete, truncate, and drop)

This article mainly discusses the differences bet...

18 Web Usability Principles You Need to Know

You can have the best visual design skills in the...

13 JavaScript one-liners that will make you look like an expert

Table of contents 1. Get a random Boolean value (...

How to install SVN server under Linux

1. Yum installation yum install subversion 2. Con...

Summary of pitfalls of using nginx as a reverse proxy for grpc

background As we all know, nginx is a high-perfor...

18 common commands in MySQL command line

In daily website maintenance and management, a lo...

SQL Server database error 5123 solution

Because I have a database tutorial based on SQL S...

Simplify complex website navigation

<br />Navigation design is one of the main t...