Web Front-endBootstrap TutorialLet's talk about the grid layout in Bootstrap and see how to align vertically and horizontallyLet's talk about the grid layout in Bootstrap and see how to align vertically and horizontally
This article will take you through the grid layout in Bootstrap, and look at the vertical alignment and horizontal alignment. I hope it will be helpful to you!
1. Bootstrap Grid Layout
In the previous section we introduced the grid in Bootstrap, and the grid is used in web page layout is a key and difficult point. Layout is the starting point and foundation of web design. You must spend time to understand it. At least understand the content of the tutorial I wrote, because what I wrote is the most commonly used and basic. Of course, for a web designer with a certain foundation, I believe these contents can be understood at a glance. Today we will learn more about grid layout. [Related recommendations: "bootstrap Tutorial"]
This section involves some functions in the general-purpose flexible box (Flex).
2. Vertical alignment
2.1 Set vertical alignment in the row tag
By setting the row Add align-items-start, align-items-center, align-items-end to the tag to change the vertical alignment of the row in the container, as above The three labels are top alignment, center alignment, and bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect.
<!doctype html>
<html>
<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="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>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row align-items-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-end">
<div> </div>
<div></div>
<div></div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2.2 Set vertical alignment in col tag
By adding in col tag align-self-start, align-self-center, align-self-end can change the vertical alignment of the column in the row, the above three labels are the top Alignment, center alignment, bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect.
<!doctype html>
<html>
<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="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>垂直对齐演示</title>
</head>
<body>
<div>
<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
By addingjustify-content-start, justify-content-center, justify-content-end, # in the row tag ##justify-content-around, justify-content-between, justify-content-evenly can change the horizontal alignment of columns within a row. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect. <pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<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="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>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row justify-content-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-end">
<div> </div>
## <div></div>
<div></div>
</div>
<div class="row justify-content-around">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-between">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-evenly">
<div> </div>
<div></div>
<div></div>
</div>
</div>
</body>
</html></pre>
The above is the detailed content of Let's talk about the grid layout in Bootstrap and see how to align vertically and horizontally. For more information, please follow other related articles on the PHP Chinese website!
What is Bootstrap? An Introduction for BeginnersApr 22, 2025 am 12:07 AMBootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.
Bootstrap Demystified: A Simple ExplanationApr 21, 2025 am 12:13 AMBootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop
Bootstrap vs. React: Choosing the Right ApproachApr 20, 2025 am 12:09 AMBootstrap is suitable for quick construction and small projects, while React is suitable for complex and interactive applications. 1) Bootstrap provides predefined CSS and JavaScript components to simplify responsive interface development. 2) React improves performance and interactivity through component development and virtual DOM.
Bootstrap's Purpose: Building Consistent and Attractive WebsitesApr 19, 2025 am 12:07 AMThe main purpose of Bootstrap is to help developers quickly build responsive, mobile-first websites. Its core functions include: 1. Responsive design, which realizes layout adjustments of different devices through a grid system; 2. Predefined components, such as navigation bars and modal boxes, ensure aesthetics and cross-browser compatibility; 3. Support customization and extensions, and use Sass variables and mixins to adjust styles.
Bootstrap vs. Other Frameworks: A Comparative OverviewApr 18, 2025 am 12:06 AMBootstrap is better than TailwindCSS, Foundation, and Bulma because it is easy to use and quickly develop responsive websites. 1.Bootstrap provides a rich library of predefined styles and components. 2. Its CSS and JavaScript libraries support responsive design and interactive functions. 3. Suitable for rapid development, but custom styles may be more complicated.
Integrating Bootstrap Styles in React: Methods and TechniquesApr 17, 2025 am 12:04 AMIntegrating Bootstrap in React projects can be done in two ways: 1) introduced using CDN, suitable for small projects or rapid prototyping; 2) installation using npm package manager, suitable for scenarios that require deep customization. With these methods, you can quickly build beautiful and responsive user interfaces in React.
Bootstrap in React: Advantages and Best PracticesApr 16, 2025 am 12:17 AMAdvantages of integrating Bootstrap into React projects include: 1) rapid development, 2) consistency and maintainability, and 3) responsive design. By directly introducing CSS files or using the React-Bootstrap library, you can use Bootstrap's components and styles efficiently in your React project.
Bootstrap: A Quick Guide to Web FrameworksApr 15, 2025 am 12:10 AMBootstrap is a framework developed by Twitter to help quickly build responsive, mobile-first websites and applications. 1. Ease of use and rich component libraries make development faster. 2. The huge community provides support and solutions. 3. Introduce and use class names to control styles through CDN, such as creating responsive grids. 4. Customizable styles and extension components. 5. Advantages include rapid development and responsive design, while disadvantages are style consistency and learning curve.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Mac version
God-level code editing software (SublimeText3)
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
