How to layout bootstrap

Using Bootstrap to layout a website requires a grid system that divides the page into containers, rows, and columns. First add the container, then add the rows in it, add the columns within the row, and finally add the content in the column. Bootstrap's responsive layout function automatically adjusts the layout according to breakpoints (xs, sm, md, lg, xl). Different layouts under different screen sizes can be achieved by using responsive classes.

Bootstrap layout guidance

How to use Bootstrap for layout?

Bootstrap is a CSS framework for rapid development of responsive, mobile-first websites and applications. It provides a range of pre-built classes and components for easy creation of website layouts.

Bootstrap layout structure

Bootstrap organizes content using a grid system that divides pages into horizontal rows and vertical columns. The basic mesh structure is as follows:

• Container: Contains the entire page content.
• Row: Defines a horizontal row that contains columns.
• Column: Specifies the width of the content in the row.

Steps to create a layout

1. Add a container: Create a container using <div class="container"> .<li> <strong>Add row:</strong> Create rows in the container, using <code><div class="row"> .<li> <strong>Add a column:</strong> Add a column in a row, using <code><div class="col-*"> , where <code>* specifies the column width (for example, col-6 represents a column that accounts for 6/12 width in a row).
2. Set content: Add content to the column.

Bootstrap Responsive Layout

Bootstrap's responsive layout feature allows websites to automatically adjust based on browser or device size. Bootstrap uses breakpoints to define the screen size range and adjusts the layout for each breakpoint. The breakpoints are as follows:

Breakpoint	Screen width
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

Example of using Bootstrap responsive class

Create a container that is laid out for three columns on medium and large screens and single columns on small screens:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>