This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

What is the bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layout, mobile-first WEB projects.

Why bootstrap

  • Mobile First: Since Bootstrap 3, the framework has included mobile first styles throughout the library.

  • Browser support: Bootstrap is supported by all major browsers.

  • Easy to get started: Once you have a basic knowledge of HTML and CSS, you can start learning Bootstrap.

  • Responsive design: Bootstrap’s responsive CSS ADAPTS to desktops, tablets, and mobile phones. See Bootstrap for more on responsive design.

  • It provides a concise and unified solution for developers to create interfaces.

  • It contains powerful built-in components that are easy to customize.

  • It also provides web-based customization.

  • It’s open source.

What does Bootstrap contain?

  • Basic structure: Bootstrap provides a basic structure with a grid system, link styles, and backgrounds. This is explained in detail in the Bootstrap basic structure section.
  • CSS: Bootstrap comes with global CSS Settings, basic HTML element styles, extensible classes, and an advanced grid system. This is explained in detail in the Bootstrap CSS section.
  • Components: Bootstrap contains a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more. This is explained in detail in the layout components section.
  • JavaScript plugins: Bootstrap contains a dozen custom jQuery plugins. You can include all plug-ins directly or individually. This is explained in detail in the Bootstrap plug-in section.
  • Customization: You can customize Bootstrap components, LESS variables, and jQuery plug-ins to get your own version.

Grid system

What is the Bootstrap grid system

Description of the grid system in the official Bootstrap documentation:

Bootstrap consists of a responsive, mobile-first, unfixed grid system that can scale appropriately to 12 columns as the device or viewport size increases. It includes predefined classes for simple layout options as well as powerful hybrid classes for generating more semantic layouts.

Let’s understand the above statement. Bootstrap 3 is mobile first, in the sense that the Bootstrap code starts with small screen devices (such as mobile devices, tablets) and then extends to components and grids on large screen devices (such as laptops, desktops).

<! DOCTYPEhtml>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.row div{
			height: 100px;
			background: green;
			border: 1px solid # 000;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-1">The first column</div>
			<div class="col-xl-1">The second column</div>
			<div class="col-xl-1">The third column</div>
			<div class="col-xl-1">Column 4</div>
			<div class="col-xl-1">The fifth column</div>
			<div class="col-xl-1">6 columns</div>
			<div class="col-xl-1">The seventh column</div>
			<div class="col-xl-1">The 8th column</div>
			<div class="col-xl-1">Column 9</div>
			<div class="col-xl-1">Column 10</div>
			<div class="col-xl-1">11 columns</div>
			<div class="col-xl-1">12 columns</div>
		</div>
		<div class="row">
			<div class="col-xl-2">Of 2 columns</div>
			<div class="col-xl-7">Of seven columns</div>
			<div class="col-xl-1">One column</div>
			<div class="col-xl-2">Of 2 columns</div>
		</div>
		<div class="row">
			<div class="col-xl-10">Accounting for 10 column</div>
			<div class="col-xl-2">Of 2 columns</div>
		</div>
		<div class="row">
			<div class="col-xl-12">12 columns</div>
		</div>
		<div class="row">
			<div class="col-xl-6">Six columns</div>
			<div class="col-xl-8">Eight columns</div>
		</div>
		<div class="row">
			<div class="col-xl-15">Of 15 columns</div>
		</div>
	</div>
</body>

</html>

Copy the code
<! DOCTYPEhtml>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid # 000;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-xl-3">Xl is super large screen. The screen width is >=1200, the container is fixed at 1140px, and 12 columns can be set in a row. When the screen size is smaller than 1200, only one column can be set in a row</div>
			<div class="col-xl-3"></div>
			<div class="col-xl-3"></div>
			<div class="col-xl-3"></div>
		</div>
		<div class="row mt-5">
			<div class="col-lg-4">Lg for large screen. The screen width is >=992px, the container width is fixed at 960px, and 12 columns can be set in a row. When the screen size is smaller than 992, only one column can be set in a row</div>
			<div class="col-lg-4"></div>
			<div class="col-lg-4"></div>
		</div>
		<div class="row mt-5">
			<div class="col-md-6">Md: medium screen. The screen width is >=768px, the container width is fixed at 720px, and 12 columns can be set in a row. When the screen size is smaller than 768, only one column can be set in a row</div>
			<div class="col-md-6"></div>
		</div>
		<div class="row mt-5">
			<div class="col-sm-3">Sm is a small screen. The screen width is >=576px, the container width is fixed at 540px, and 12 columns can be set in a row. When the screen size is smaller than 576, only one column can be set in a row</div>
			<div class="col-sm-3"></div>
			<div class="col-sm-3"></div>
			<div class="col-sm-3"></div>
		</div>
		<div class="row mt-5">
			<div class="col-4">Col is ultra-small screen. The screen width is <576px, the container width is auto, and you can always set 12 columns in a row</div>
			<div class="col-4"></div>
			<div class="col-4"></div>
		</div>

		<! -- Set the width of the same column, split the width, set it through the class of.col -->
		<div class="row mt-5">
			<div class="col">Column width</div>
			<div class="col">Column width</div>
			<div class="col">Column width</div>
			<div class="col">Column width</div>
			<div class="col">Column width</div>
			<div class="col">Column width</div>
			<div class="col">Column width</div>
		</div>

		<! Add a. W-100 class where you want to break the column.
		<div class="row mt-5">
			<div class="col">Width column 1</div>
			<div class="col">Width column 2</div>
			<div class="w-100" style="height: auto; border: none;"></div>	
			<div class="col">Width 3</div>
			<div class="col">Width column 4</div>
		</div>
	</div>
</body>

</html>
Copy the code

The working principle of the Bootstrap Grid System

A grid system creates a page layout with a series of rows and columns containing content. Here is a list of how the Bootstrap grid system works:

  • Rows must be placed inside the.container class for proper alignment and padding.
  • Use rows to create a horizontal group of columns.
  • Content should be placed inside a column, and only a column can be a direct child of a row.
  • Predefined grid classes, such as.row and.col-XS-4, can be used to quickly create grid layouts. LESS hybrid classes are available for more semantic layouts.
  • Columns use padding to create gaps between column contents. The inner margin is negative by the margin on.rows, which indicates the row offset of the first and last columns.
  • The grid system is created by specifying twelve available columns that you want to span. For example, to create three equal columns, use three.col-XS-4.