Bootstrap layout
A layout defines how you structure the contents of websites. Bootstrap provides various components which can be used to design different types of layout to build a website. The bootstrap layout consists of containers, a grid system, flexible media objects, and responsive utility classes. Let's discuss them one by one.
Breakpoints
Breakpoints in bootstrap are used to customize width across different viewports. It determines the responsive layouts across devices. The word responsive means it can adjust itself with the varying screen size of devices.
Bootstrap 5 has six default breakpoints whereas Bootstrap 4 has five breakpoints. It is also known as grid tiers. Each breakpoint can hold a container whose width is multiple of 12. Here is the list of breakpoints along with their maximum width.
Bootstrap 5 Breakpoints
The following are available breakpoints in bootstrap 5.
| Breakpoints |
class infix |
Dimensions |
| X-small |
none |
<576px |
| Small |
sm |
>=576px |
| Medium |
md |
>=768px |
| Large |
lg |
>=992px |
| Extra Large |
xl |
>=1200px |
| Extra extra large |
xxl |
>=1400px |
Example: Example to illustrate breakpoint
Let's take an example to illustrate the breakpoints in the container. Here we have taken a container for smaller screen size. Similarly, we can add breakpoints to rows, columns, tables, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-sm" style ="background-color:gray;">
<h1> Bootstrap Container</h1>
<p>.container-sm</p>
</div>
</body>
</html>
Output:
Here is a sample out to show how we can add breakpoints to the container.
Container
A container is the most basic element used for building layouts in bootstrap. A container is required for building the grid system.
There are three types of containers in Bootstrap which are given below:
- .container - It provides a fixed-width responsive container.
- .container-fluid - It provides a full-width container for all types of devices.
- .container-{breakpoint} - It also provides full-width container unless the breakpoints are specified.
Example: Adding container using bootstrap 5
The container can be styled by adding background color, border, and padding. Here is a program to create a container and add color, border, and padding to the container.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-info text-white pt-3">Bootstrap Container</div>
</body>
</html>
Output:
The picture below shows the output of the above program.
Grid System
Bootstrap Grid System consists of containers, rows, columns to design layout for webpages. It uses flexbox to build layouts.
- Container in a grid system is used to center and horizontally align contents in the webpage.
- In a grid layout, content must be placed within columns and columns are the immediate children of rows.
- The column class is used to insert columns in the grid system. Up to 12 columns can be inserted per row.
- The grid system consists of 6 breakpoints to make it responsive. They are xs, sm, md, lg, xl, and xxl.
Example: Adding grids to a page using bootstrap 5
Here in the example, we have added components of the grid system that is a container, rows, and columns. The columns used here are for small viewports. Further, we have styles the columns with CSS background color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style=border>
<h1>Bootstrap Grid</h1>
<p>An Example to show how bootstrap grid works</p>
<div class="row">
<div class="col-sm-4" style="background-color:cyan;" >column 1</div>
<div class="col-sm-8" style="background-color:yellow;" >column 2</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:pink;" >column 3</div>
<div class="col-sm-4" style="background-color:gray;" >column 4</div>
<div class="col-sm-4" style="background-color:blue;" >column 5</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the bootstrap grid system.
Utilities of layout
Bootstrap provides various utility classes for showing, hiding, aligning contents. Let us explore them one by one.
Display
Display utilities are used to responsively toggle the display properties.
- Display utility class can be applied to all breakpoints. Use .d-{value} for xs and .d-{breakpoints}-{value} for other breakpoints.
- To hide elements use .d-none class or .d-{breakpoints} for responsive screen variation.
Example: Creating a block and inline display element.
Here, we have shown you two different types of display. The first one is .d-inline elements and the second one is .d-block display elements. Along with the display utility, we have also used some background colors and spacing.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h4> Inline elements </h4>
<div class="d-inline m-2 p-2 bg-secondary ">inline</div>
<div class="d-inline m-2 p-2 bg-secondary ">inline</div>
<h4> Block level elements </h4>
<div class="d-block m-2 p-2 bg-secondary ">block</div>
<div class="d-block m-2 p-2 bg-secondary">block</div>
</body>
</html>
Output:
Margin and padding
Use spacing utilities to control spaces and sizes of elements. For adding margin and padding use format {property}-{sides}-{size} for xs breakpoint and for others use {property}-{sides}-{breakpoint}-{size}.
- Use .m for margin and .p for padding as one of property.
- Use .t , .b, .l, .r for adding property to top, bottom, left, and right side respectively.
- The sizes can be from 0-5 for adding space and size. .auto is also used to set margin to auto.
Example: Adding margins and padding to the element.
Here in the example, we have added padding and margins to the element. So we can easily create space between them for a better appearance of the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style=border>
<h1>Bootstrap Grid</h1>
<div class="row">
<div class="col mx-5 bg-success" >column 1</div>
<div class="col px-5 bg-info">column 2</div>
</div>
<div class="row">
<div class="col m-2 px-2 bg-warning">column 3</div>
<div class="col m-2 px-2 bg-secondary">column 4</div>
<div class="col m-3 p-2 bg-warning">column 5</div>
</div>
</div>
</body>
</html>
Output:
Output showing margins and padding in columns.
Conclusion
So here we have discussed the components used to build layouts in bootstrap. We can design any type of layout using these components. Also, we have used utility classes to modify these components. Bootstrap provides an easy and quick way to add components to the webpage.
