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:
|
<<: 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
Summary of @ usage in CSS (with examples and explanations)
An at-rule is a declaration that provides instruc...
A brief discussion on what situations in MySQL will cause index failure
Here are some tips from training institutions and...
How to obtain root permissions in a docker container
First, your container must be running You can vie...
MySQL 5.7.21 winx64 free installation version configuration method graphic tutorial
MySQL 5.7.21 winx64 free installation version con...
Detailed explanation of the use of Vue3 state management
Table of contents background Provide / Inject Ext...
Example of how to achieve semi-transparent background image and opaque content in CSS3
I encountered this problem when I was making the ...
How to use Vue to develop public account web pages
Table of contents Project Background start Create...
How to install MySQL using yum on Centos7 and achieve remote connection
Centos7 uses yum to install MySQL and how to achi...
Detailed explanation of HTML form elements (Part 1)
HTML forms are used to collect different types of...
Example code of the spread operator and its application in JavaScript
The spread operator allows an expression to be ex...
Introduction to Docker containers
Docker Overview Docker is an open source software...
How to deploy MongoDB container with Docker
Table of contents What is Docker deploy 1. Pull t...
An article to help you learn CSS3 picture borders
Using the CSS3 border-image property, you can set...
Analysis and solution of data loss during Vue component value transfer
Preface In the previous article Two data types in...
MySQL trigger definition and usage simple example
This article describes the definition and usage o...