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

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

js realizes the non-select drop-down box version of the three-level linkage of provinces, cities and districts

I searched for three-level linkage on the Interne...

What does mysql database do

MySQL is a relational database management system ...

js learning notes: class, super and extends keywords

Table of contents Preface 1. Create objects befor...

Several ways to clear arrays in Vue (summary)

Table of contents 1. Introduction 2. Several ways...

How to use MySQL limit and solve the problem of large paging

Preface In daily development, when we use MySQL t...

Solve the problem of blocking positioning DDL in MySQL 5.7

In the previous article "MySQL table structu...

25 fresh useful icon sets for download abroad

1. E-Commerce Icons 2. Icon Sweets 2 3. Mobile Ph...

How to configure the same domain name for the front and back ends of nginx

This article mainly introduces the method of conf...

Solution to the MySQL installation prompt "Please type NET HELPMSG 3534 for more help"

The following error message appears when installi...

How to avoid duplication of data when inserting in MySql batch

Table of contents Preface 1. insert ignore into 2...

Configure Mysql master-slave service implementation example

Configure Mysql master-slave service implementati...

Sample code for implementing 3D rotation effect using pure CSS

Mainly use the preserve-3d and perspective proper...

Implementation of forced line breaks and non-line breaks in div, td, p and other containers in HTML

1. Force no line break and end with an ellipsis. C...

How to manually build a new image with docker

This article introduces the method of manually bu...