Author: saqibkhan

Tables

This chapter will discuss about bootstrap tables and the classes to create table. Tables is used to organize data in the form of rows and columns. Tables allow you to group huge amounts of data and present them clearly and in an orderly manner. Some table items supported by Bootstraps are listed below.

Sr.No.	Tag & Description
1	<table>Wrapping element for displaying data in a tabular format
2	<thead>Container element for table header rows (<tr>) to label table columns.
3	<tbody>Container element for table rows (<tr>) in the body of the table.
4	<tr>Container element for a set of table cells (<td> or <th>) that appears on a single row.
5	<td>Default table cell.
6	<th>Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
7	<caption>Defines a table caption

Simple table

If you want a basic table style with just a little light padding and horizontal dividers, add the .table class at table, as shown in the example below.

Example

You can edit and try running this code using Edit & Run option.

<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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script><title >Bootstrap - Table</title ></head ><body ><table class="table" ><thead ><tr ><th scope="col" >Sr.No.</th ><th scope="col" >Name</th ><th scope="col" >Role</th ><th scope="col" >Salary</th ></tr ></thead ><tbody ><tr ><th scope="row" >1</th ><td >Jhon</td ><td >Software Developer</td ><td >40000</td ></tr ><tr ><th scope="row" >2</th ><td >David</td ><td >Tester</td ><td >50000</td ></tr ><tr ><th scope="row" >3</th ><td >Mary</td ><td >Data Analyst</td ><td >35000</td ></tr ></tbody ></table ></body ></html >

Variants

The contextual classes allow you to change the background color of your table rows or individual cells. Add classes .table-active, .table-success, .table-danger, .table-warning class to Highlight a table row or cell, as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Table</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr class="table-default"><th scope="row">1</th><td>Oliver</td><td>Full satck developer</td><td>40000</td></tr><tr class="table-primary"><th scope="row">2</th><td>Jhon</td><td>Software Developer</td><td>43000</td></tr><tr class="table-secondary"><th scope="row">3</th><td>David</td><td>Tester</td><td>60000</td></tr><tr class="table-info"><th scope="row">4</th><td>Sam</td><td>Software Developer</td><td>35000</td></tr><tr class="table-danger"><th scope="row">5</th><td>Mary</td><td>Data Analyst</td><td>36000</td></tr><tr class="table-success"><th scope="row">6</th><td>James</td><td>Tester</td><td>47000</td></tr><tr class="table-active"><th scope="row">7</th><td>Mary</td><td>HR</td><td>90000</td></tr><tr class="table-light"><th scope="row">8</th><td>Noah</td><td>Data Analyst</td><td>50000</td></tr><tr class="table-warning"><th scope="row">9</th><td>Lucas</td><td>Software Developer</td><td>52000</td></tr><tr class="table-dark"><th scope="row">10</th><td>Almand</td><td>Software Developer</td><td>73000</td></tr></tbody></table></body></html>

Accented tables

Striped rows

To get zebra-striping on the rows add .table-striped class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Striped columns

To get zebra-striping on the columns add .table-striped-columns class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-dark and .table-striped to get the dark color zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table table-dark  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-dark and .table-striped-columns to get the dark color zebra-striping columns.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table table-dark  table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-success and .table-striped to get the light green color zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table  table-success table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-success and .table-striped-columns to get the light green color zebra-striping columns on the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table  table-success table-striped-columns"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Hoverable rows

Add the .table-hover class to get the hover effect on table rows as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script><title>Bootstrap - Table</title></head><body><table class="table table-hover  table-secondary"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-hover and .table-dark to get the dark color hover effect on table rows.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table  table-dark table-hover"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Add the classes .table-hover and .table-striped to get the hover effect with zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table  table-hover  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Active table

Add .table-active class to highlight the row or cell of the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr class="table-active"><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr class="table-active"><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Bordered table

To get boundaries around each item and rounded corners around the whole table add .table-bordered class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script><title>Bootstrap - Table</title></head><body><table class="table table-bordered  border-primary"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Tables without borders

To get the table without borders add .table-borderless class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table table-borderless"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Small tables

To make table more compact by cutting all cell padding in half by adding .table-sm class to any .table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script><title>Bootstrap - Table</title></head><body><table class="table table-sm"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Table group dividers

To make table border thicker and darker between table groups .thead, .tbody and .tfoot add a .table-sm class, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody class="table-group-divider"><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mary</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Vertical alignment

The cells of the <thead> table are always vertically aligned to the bottom. The cells in the <tbody> table inherit their alignment from <table> and are aligned to the top by default. Use the vertical alignment classes to re-align as required

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Tables</title></head><body><div class="table-responsive"><table class="table align-middle"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr class="align-bottom"><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td>Mery</td><td class="align-top">Data Analyst</td><td>35000</td></tr></tbody></table></div></body></html>

Responsive table

Responsive tables enable horizontal scrolling of the table. Wrapping class .table with .table-responsive makes a table responsive across different view ports. Add a maximum breakpoint to a responsive table by using .table-responsive{-sm|-md|-lg|-xl|-xxl}. Following table depicts the screensize and respective Bootstrap table class:

Class	Screen width
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
.table-responsive-xxl	< 1400px

Example

You can edit and try running this code using Edit & Run option.

<!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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Age</th><th scope="col">Blood Group</th><th scope="col">gender</th><th scope="col">Address</th><th scope="col">Married</th><th scope="col">Education</th><th scope="col">AdharCard Number</th><th scope="col">Pan Number</th><th scope="col">City</th><th scope="col">Country</th><th scope="col">Salary</th><th scope="col">status</th><th scope="col">status</th><th scope="col">status</th><th scope="col">status</th></tr></thead><tbody><tr><td></td><td>Jhon</td><td>Software Developer</td><td>32</td><td>A+</td><td>Male</td><td>Pune,Maharashtra.</td><td>Yes</td><td>B.E(Computer Science)</td><td>0101010101010101</td><td>2020200202020202</td><td>Pune</td><td>India</td><td>40000</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td></tr></tbody></table></div></body></html>

Nesting

Table nesting is used to create a table inside of a table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<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.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" ><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table"><thead class="table"><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><td colspan="4"><table class="table mb-0  table-striped"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Almand</td><td>Software Developer</td><td>60000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>35000</td></tr><tr><th scope="row">3</th><td>Sam</td><td>Data Analyst</td><td>40000</td></tr></tbody></table></td></tr><tr><th scope="row">2</th><td>Mona</td><td>Data Analyst</td><td>50000</td></tr><tr><th scope="row">3</th><td>Oliver</td><td>Tester</td><td>45000</td></tr></tbody></table></body></html>

Anatomy

Table head

Add classes .table-secondary to make table head gray color, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table"><thead class="table-secondary"><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

Table foot

The .tfoot class add footer at the end of the table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table"><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody><tfoot><tr><th scope="row">footer</th><td >footer</td><td>footer</td><td>footer</td></tr></tfoot></table></body></html>

Caption

A <caption> functions use to give a heading for a table., as seen in the below example

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Table</title></head><body><table class="table"><caption>List of Employees</caption><thead><tr><th scope="col">Sr.No.</th><th scope="col">Name</th><th scope="col">Role</th><th scope="col">Salary</th></tr></thead><tbody><tr><th scope="row">1</th><td>Jhon</td><td>Software Developer</td><td>40000</td></tr><tr><th scope="row">2</th><td>David</td><td>Tester</td><td>50000</td></tr><tr><th scope="row">3</th><td >mery</td><td>Data Analyst</td><td>35000</td></tr></tbody></table></body></html>

September 22, 2025

Images

This chapter will discuss various classes provided by Bootstrap, as a support to the images. Images play a vital role in capturing the attention of a visitor on a website. Apart from making the content interesting and engaging, the images help in planning the content strategy of any website.

Responsive Images

Images can be made responsive in Bootstrap using the class .img-fluid. This class applies max-width: 100%; and height: auto; to the image so that it scales with the parent width. The responsive images automatically fit as per the size of the screen.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3 p-2"><h2 class="text-start">Responsive Image</h2><img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image"></div></body></html>

Image as Thumbnail

An image to be displayed as a thumbnail with a border and some padding, use the class .img-thumbnail on the image element

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3 p-2"><h2 class="text-start">Thumbnail Image</h2><img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image"></div></body></html>

Image with Rounded Corners

An image to be displayed with rounded corners, use the class .rounded on the image element

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3 p-2"><h2 class="text-start">Image with rounded corners</h2><img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners"></div></body></html>

Alignment of Images

The images that are added to the webpage can be aligned as per our choice and that can be left, right or centred. In order to place an image:

to the left, use the class .float-start

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3 p-2"><h2 class="text-start">Image aligned to left</h2><img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image"></div></body></html>

to the right use the class .float-end

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3 p-2"><h2 class="text-center">Image aligned to right</h2><img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image"></div></body></html>

to the center, use the utility classes .mx-auto (margin:auto) and .d-block (display:block)

Example

You can edit and try running this code using theEdit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h2 class="text-center">Image aligned to centre</h2><img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image"></div></body></html>

Picture

When multiple <source> elements are used for a specific image <img> element under a <picture> element/tag, then we must add the .img-* classes to the <img> element and not to the <picture> element/tag.

Example

You can edit and try running this code using theEdit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Images</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1>Use of Picture tag</h1><picture><img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png"></picture></body></html>

September 22, 2025

Typography

This chapter, will discuss about the various typography related features provided by Bootstrap. Typography is the art of making the written matter look legible, attractive and appealing when displayed.

Bootstrap Default / Global Settings

The latest version of Bootstrap sets the default settings for display, typography and link styles. Following are some of the default settings:

Bootstrap sets a default font-size of 1rem, 16px by default.
Bootstrap sets the line-height as 1.5
For optimum text rendering on every device and OS through font-family, use the “Native Font Stack”.
The $body-bg variable should be used to set a background-color on the <body> tag, where #fff is by default.
The global link color can be set using the variable $link-color and apply link underlines only on :hover.
To apply the typographic base to the <body> tag, use the attributes such as $font-family-base, $font-size-base, and $line-height-base.

One must set the $font-size-base in rem. The global variables are defined in _variables.scss and the styles within _reboot.scss.

Headings

The HTML heading tags i.e. <h1> to <h6> are styled in bootstrap in the following way.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Headings </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1>Heading 1 - h1</h1><h2>Heading 2 - h2</h2><h3>Heading 3 - h3</h3><h4>Heading 4 - h4</h4><h5>Heading 5 - h5</h5><h6>Heading 6 - h6</h6></body></html>

The classes .h1 to .h6 are also available in bootstrap, to match the font styling of a heading without using the associated HTML element.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Headings Classes </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p class="h1">Class h1 - Heading 1</p><p class="h2">Class h2 - Heading 2</p><p class="h3">Class h3 - Heading 3</p><p class="h4">Class h4 - Heading 4</p><p class="h5">Class h5 - Heading 5</p><p class="h6">Class h6 - Heading 6</p></body></html>

Customizing Headings

The utility classes provided by bootstrap can be used to customize the headings.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Customizing Headings </title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p>This is an example to show the customized heading.</p><h4>
    Here the text will
  &lt;small class="text-muted"&gt; be customized through this class.&lt;/small&gt;&lt;/h4&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Display Headings



When the headings are to be displayed in a larger and opinionated style, then the display heading classes can be used



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Display Headings </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p class="display-1">Display 1 - Heading 1</p><p class="display-2">Display 2 - Heading 2</p><p class="display-3">Display 3 - Heading 3</p><p class="display-4">Display 4 - Heading 4</p><p class="display-5">Display 5 - Heading 5</p><p class="display-6">Display 6 - Heading 6</p></body></html>



Lead



The class .lead makes the paragraph stand out. It gives a larger font size, lighter weight, and a taller line height to the text in a paragraph.https://www.tutorialspoint.com/bootstrap/examples/typography_lead.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Lead </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p class="lead">
   The class lead will make the paragraph look different from the regular paragraph. It looks stand-out.
 &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Abbreviations



The <abbr> element of HTML is styled by bootstrap where the fullform of the abbreviations and the acronyms is shown on hover and the text is displayed with a light dotted line at the bottom of the text.



Use .initialism class to an abbreviation, in order to get a slightly smaller font size.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Abbreviations </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><abbr title="Indian Space Research Organisation">ISRO</abbr></p><p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p></body></html>



Blockquote



When a block of content needs to be added in a document as a quote, class .blockquote is used around the <blockquote> html element.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Blockquote </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for blockquote</h4><p>Refer the quote given below.</p><blockquote class="blockquote"><p>An ounce of patience is worth more than a tonne of preaching</p></blockquote></body></html>



Naming a Source



Bootstrap provides a class .blockquote-footer inside the <footer> element for identifying the source. <cite> tag is used to wrap the name of the source work.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Naming Source </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for Naming a Source</h4><p>Refer the quote given below.</p><blockquote class="blockquote"><p>An ounce of patience is worth more than a tonne of preaching</p><footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer></blockquote></body></html>



Alignment



Bootstrap provides classes to change the alignment of the blockquote, such as .text-center and .text-right.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography - Blockquote Alignment </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for alignment of blockquote</h4><p>Refer the quote given below.</p><blockquote class="blockquote text-center"><p>An ounce of patience is worth more than a tonne of preaching</p><footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer></blockquote></body></html>



Inline Text Elements



Instead of using the common inline HTML5 elements, bootstrap provides the classes that can be used for styling of the text. Follow some of the examples given below:




.mark




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of mark </h4><p>Demonstrating use of mark tag to <mark> highlight </mark>  text.</p><p class="mark">Demonstrating use of mark class to highlight text.</p></body></html>




.small




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of small</h4><p>Demonstrating use of <small> tag to make the text look fineprint.</p><p class="small">Demonstrating use of small class to make the text look fineprint.</p></body></html>




.text-decoration-underline




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .text-decoration-underline</h4><p>Demonstrating use of <u> tag to make the text underlined.</p><p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p></body></html>




.text-decoration-line-through




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .text-decoration-line-through</h4><p>Demonstrating use of s tag to treat the text as no longer accurate.</p><p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p></body></html>




<del>




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of <del> element</h4><p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p></body></html>




<strong>




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of strong element</h4><p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p></body></html>




<em>




Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Inline Elements</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of em element</h4><p><em>Demonstrating use of em tag to render the text as italicized.</em></p></body></html>



Lists



Unstyled



The class .list-unstyled removes the default style of list and the left margin on the items of the list. However, this style only applies to the immediate child elements.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Lists</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .list-unstyled</h4><p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p><ul class="list-unstyled"><li>Snacks</li><li>Beverages
       &lt;ul class="list"&gt;&lt;li&gt;Cold Beverage&lt;/li&gt;&lt;li&gt;Hot Beverage&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Inline



Bootstrap provides a combination of two classes, .list-inline and .list-inline-item, that removes a list's bullets and adds some margin or space in between the listed items.



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Lists</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of .list-inline and .list-inline-item</h4><p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p><ul class="list-inline"><li class="list-inline-item">Tea</li><li class="list-inline-item">Coffee</li><li class="list-inline-item">Juice</li></ul></body></html>



Description List Alignment



Bootstrap provides predefined classes to be added to the <dl>, <dt>, and <dd> tags of HTML to align terms and descriptions horizontally. One can optionally add the class .text-truncate to truncate the text with an ellipsis.https://www.tutorialspoint.com/bootstrap/examples/typography_desc_list_alignment.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Typography Description List Alignment</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Use of classes for description list alignment</h4><p>The predefined classes of bootstrap help to align terms and description in grid form.</p><dl class="row"><dt class="col-sm-3">Description Lists</dt><dd class="col-sm-9">This tag shows the description of the term</dd><dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt><dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd></dl></body></html>



Responsive Font Sizes



Responsive font sizes are enabled in bootstrap 5 by default, allowing the text to scale automatically across all the devices and viewport sizes. It is abbreviated as RFS and is capable of rescaling the text with unit values like margin, padding, border-radius, or even box-shadow.



The RFS automatically calculates the appropriate values as per the dimensions of the browser viewport.

September 22, 2025

Reboot

This chapter will discuss about Bootstrap reboot. Reboot is used to reset all the styles of a particular element.

Approach

Reboot styles HTML elements with opinionated styles using only element selectors. Extra styling is done with classes only. For instance, reboot some <table> styles, then include the classes .table, .table-bordered, and more.

Replace default ems with rems for scalable component spacing in browsers.
Skip margin-top. Vertical margins collapse unexpectedly. However, a margin with single direction is a simpler concept.
Block elements should use rems for margins to make scaling across device sizes easier.
Use inherit whenever possible and limit font-related properties declarations.

This enables you to customize in real-time, however you’d like to:

<body style="--bs-body-color: #333;"><!-- ... --></body>

Page defaults

Reboot is used for a elements <HTML> and <body> elements to provide better page-wide defaults. More details are as below.

All elments have a global box-sizing, including *::before, *::after, to border-box. Padding and borders won’t exceed element’s declared width because of it.
- If no font-size is set on <HTML>, 16px is assumed as browser default. Use font-size: 1rem on the <body> for accessible, responsive type-scaling, considering user preferences. Modify $font-size-root variable to override default browser setting.
Global styles for <body> include font-family, font-weight, line-height, and color. To avoid font discrepancies, some form elements will inherit this later.
<body> background-color is defaulted to #fff for security purposes.

Native font stack

Reboot is used for the Bootstrap uses a native font stack or system font stack for optimum text rendering on every device and OS.
These system fonts are designed for modern devices with improved screen rendering, changeable font support and more.
Learn more about native font stacks.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Notes

The font stack has emoji fonts, thus the common symbols, dingbat Unicode characters will appear as colorful pictographs. Their appearance varies with the native emoji font of the browser or platform, and remain unaffected by CSS color styles.
font-family is applied to the <body> and automatically inherited globally in Bootstrap. Update $font-family-base and recompile the Bootstrap for global font-family change.

Headings

Bootstrap Reboot headings are used for removing the default margin that has been provided by HTML header tags which are margin-bottom: .5rem and tightened line-height.

The –bs-heading-color CSS variable allows you to change the default heading-color.

Heading	Example
<h1></h1>	h1. Bootstrap heading
<h2></h2>	h2. Bootstrap heading
<h3></h3>	h3. Bootstrap heading
<h4></h4>	h4. Bootstrap heading
<h5></h5>	h5. Bootstrap heading
<h6></h6>	h6. Bootstrap heading

Paragraphs

Bootstrap 5 reboot paragraphs are used for removing default margin-top that has been provided by HTML <p> tags and set paragraph margin-bottom: 1rem.https://www.tutorialspoint.com/bootstrap/examples/reboot_paragraph.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p></body></html>

Links

Reboot provides links have default color and underline, and change on :hover but not when a user has :visited. No special :focus styles are given.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a href="#">Visit Tutorialspoint..</a></p></body></html>

As a Bootstrap v5.3.x, link color is set using rgba() and new -rgb CSS variables. This allows easy customization of link color opacity. Link color opacity can be changed using CSS variable –bs-link-opacity as demostrated in the following example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a href="#" style="--bs-link-opacity: .7">Visit Tutorialspoint</a></p></body></html>

Bootstrap reboot targets placeholder links (those without an href) with more specific selectors. Their color and text-decoration are reset to their default values.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a>Visit Tutorialspoint</a></p></body></html>

Horizontal rules

Reboot simplifies <hr> element. The <hr> elements are styled with border-top and opacity: .25 by default, and inherit their border-color from the parent color automatically.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Horizontal rules</h2><div class="container"><hr><div class="text-primary"><hr></div><hr class="border border-warning border-3 opacity-75"><hr class="border border-info border-4 opacity-100"></div></body></html>

Lists

Bootstrap reboot has removed margin-top and set margin-bottom: 1rem of lists.
List elements <ul>, <ol>, and <dl> have a margin-top removed and set margin-bottom: 1rem.

Description lists have improved margins for easier styling, clear hierarchy, and spacing <dd>s reset margin-left to 0, and add margin-bottom: .5rem. <dt>s are bolded.https://www.tutorialspoint.com/bootstrap/examples/reboot_description_list.php

Inline Code

Use <code> to enclose inline code snippets. Escape HTML angle brackets as necessary.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container">
  The &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; element should be enclosed within an inline container.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Code blocks



Bootstrap 5 Reboot Code blocks are used to put the code inside of <pre> tag. It is recommanded to escape angle brackets in code for proper rendering. <pre> element is reset to remove its margin-top.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><pre><code>Tutorialspoint
    This is an example of code block.
    &lt;/code&gt;&lt;/pre&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variables



Reboot variables are used to reboot the style of <var> tag elements.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var></body></html>



User input



Reboot user input <kbd> is used to indicate input that is typically entered via keyboard.



The text enclosed within the <kbd> tag is typically dispalyed in the browser's default monospace font.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container">
    To save the changes, press &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;s&lt;/kbd&gt;&lt;/kbd&gt;&lt;br&gt;
    To paste the selected item, press &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;v&lt;/kbd&gt;&lt;/kbd&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Sample output



The <samp> tag should be used to indicate sample output from a program.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><samp>This text should be considered as an example output generated by a computer program.</samp></div></body></html>



Tables



Tables are modified for style <caption>s, border collapse, and consistent text-align. The .table class offers further modifications to borders and padding.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><table><caption>
        This is a caption of table to describe the contents.
      &lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Employee Id&lt;/th&gt;&lt;th&gt;Employee Name&lt;/th&gt;&lt;th&gt;Employee Role&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;Jhon&lt;/td&gt;&lt;td&gt;Software Devloper&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;20&lt;/td&gt;&lt;td&gt;Mayra&lt;/td&gt;&lt;td&gt;Tester&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;30&lt;/td&gt;&lt;td&gt;Rocky&lt;/td&gt;&lt;td&gt;Data Analyst&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Forms



Form elements have been simplified for new base styles. The most significant changes are listed below:




<fieldset>s can be easily used as wrappers for single inputs or groups of inputs as they don't have borders, padding, or margins.



<legend>s have been restyled to be displayed as a heading.



To allow for margins, <label>s are set to display: inline-block.



Normalise mainly handles the styling of <input>s, <select>s, <textarea>s, and <button>s, while reboot also removes their margin and sets line-height: inherit.



<textarea>s are only vertically resizable to prevent page layout "breaks".



<button>s and <input> buttons have cursor: pointer when not disabled.





Some date inputs are not supported by the latest versions of Safari and Firefox.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="bd-example"><fieldset><legend>Form</legend><p><label for="input">Name</label><input type="text" id="inputName" placeholder="Enter your name..."></p><p><label for="email">Email id</label><input type="email" id="emailId" placeholder="[email protected]"></p><p><label for="tel">Mobile No:</label><input type="tel" id="Mob"></p><p><label for="url">Age</label><input type="number" id="age"></p><p><label for="number">Number</label><input type="number" id="number"></p><p><label for="search">Search Here</label><input type="search" id="searchHere"></p><p><label for="range">Range</label><input type="range" id="rangeExample" min="0" max="10"></p><p><label for="file">Upload file</label><input type="file" id="fileinput"></p><p><label for="select">Languages</label><select id="select"><option value="">select...</option><optgroup label="Group 1"><option value="">HTML</option><option value="">CSS</option><option value="">Bootstrap</option></optgroup><optgroup label="Group 2"><option value="">C</option><option value="">C++</option><option value="">Java</option></optgroup></select></p><p><h6>Selects the languages</h6><label><input type="checkbox" value="">
            HTML
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="checkbox" value=""&gt;
            CSS
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="checkbox" value=""&gt;
            Javascript
        &lt;/label&gt;&lt;/p&gt;&lt;p&gt;&lt;h6&gt;Select your gender&lt;/h6&gt;&lt;label&gt;&lt;input type="radio" name="firstOption" id="radios1" value="option1" checked&gt;
          Female
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="radio" name="secondOption" id="radios2" value="option2"&gt;
          Male
        &lt;/label&gt;&lt;br&gt;&lt;label&gt;&lt;input type="radio" name="thirdOption" id="radios3" value="option3" disabled&gt;
            Others
        &lt;/label&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="textarea"&gt;Feedback&lt;/label&gt;&lt;textarea id="feedbackTextarea" rows="4"&gt;&lt;/textarea&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="date"&gt;Birth date&lt;/label&gt;&lt;input type="date" id="birthDate"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="time"&gt;Time&lt;/label&gt;&lt;input type="time" id="timeInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="password"&gt;Enter Password&lt;/label&gt;&lt;input type="password" id="password"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="datetime-local"&gt;Local Datetime&lt;/label&gt;&lt;input type="datetime-local" id="localDatetime"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="week"&gt;Select week&lt;/label&gt;&lt;input type="week" id="weekInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="month"&gt;Select month&lt;/label&gt;&lt;input type="month" id="monthInput"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="color"&gt;Selet color&lt;/label&gt;&lt;input type="color" id="selectColor"&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="output"&gt;Output: &lt;/label&gt;&lt;output name="result" id="output"&gt;Tutorialspoint&lt;/output&gt;&lt;/p&gt;&lt;p&gt;&lt;label&gt;Buttons&lt;/label&gt;&lt;button type="submit"&gt;Submit&lt;/button&gt;&lt;input type="reset" value="Reset"&gt;&lt;input type="button" value="Button"&gt;&lt;/p&gt;&lt;p&gt;&lt;label&gt;Disabled Buttons&lt;/label&gt;&lt;button type="submit" disabled&gt;Submit&lt;/button&gt;&lt;input type="reset" value="Reset" disabled&gt;&lt;input type="button" value="Button" disabled&gt;&lt;/p&gt;&lt;/fieldset&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Pointers on buttons




Reboot provides a role="button" that changes the cursor to a pointer. Use this attribute to indicate interactive elements.



Not necessary for <button> elements, as they have their own cursor change.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><span role="button" tabindex="0">Non-button element</span></div></body></html>



Misc elements



Address




Reboot address element <address> is used to change the font-style from italic to normal text.



It inherits line height and margin-bottom is set to 1rem.



Preserve formatting by ending lines with <br>.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><address><strong>ABC Corporation</strong><br>
        505 sansui street,&lt;br&gt;
        Eillis, CA 0178&lt;br&gt;&lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (212) 357-0194
      &lt;/address&gt;&lt;address&gt;&lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;/address&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Blockquote



Blockquotes default margin is 1em 40px, which is changed to 0 0 1rem for consistency with other elements. These are used when we want to quote content from other sources.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><blockquote class="blockquote"><p>Blockquote removes default margin of HTML blockquote tag element.</p></blockquote><p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p></div></body></html>



Inline elements



Reboot inline elements are used to put some elements abbreviations or short forms of an element that receive basic styling to make it different than other text.



Basic styling is applied to the <abbr> element to stand out from the paragraph text.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body>
  The &lt;abbr title="Cascading Style Sheet"&gt;CSS&lt;/abbr&gt; is a style sheet language.
  </body></html>



Summary



Text elements can be made interactive to show summary. The default value of the cursor on it is text. So it is reset to the pointer to tell that the particular element is interactive and the user can click on it.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Reboot</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><details><summary>Bootstrap Colors</summary><p>Bootstrap colors used to give the colors to the text or the background.</p></details><details open><summary>Bootstrap Dropdown</summary><p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p></details></div></body></html>



HTML5 [hidden] attribute




The golbal attribute [hidden] in HTML5 has the default styling of display: none.



To improve this default (display:none) reboot helps prevents its display from getting accidentally overridden by setting [hidden] {display: none !important;}.




<input type="text" hidden>



To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of document, use .invisible class instead

September 22, 2025

CSS Grid

This chapter will discuss about Bootstrap CSS grid. Bootstrap’s default grid system, developed over a decade, has been widely used and proven effective. It was created without modern CSS features and techniques like the new CSS Grid we see in current browsers.

How it works

Bootstrap 5 introduces the ability to use a CSS Grid-based grid system with additional Bootstrap features for creating responsive layouts using different methods.

Recompile your Sass after disabling the default grid system by setting $enable-grid-classes to false and enabling CSS Grid with $enable-cssgrid set to true.
Replace instance of .row with .grid. The class .grid creates a grid-template by setting display: grid.
Instead of using .col-* classes, use .g-col-* classes because CSS Grid columns use the grid-column property instead of width.
Customize the column and gutter sizes of the parent .grid using CSS variables –bs-columns and –bs-gap.

Key differences

Let us see differences of CSS grid system when compared to the standard grid system as below:

The impact of Flex utilities on CSS Grid columns is different.
Instead of using gutters, use gap that act like margins and replace the horizontal padding in grid system.
Grid gaps are automatically applied horizontally and vertically in. unlike .rows, .grids do not have negative margins and cannot use margin utilities to adjust the gutters. Refer to the customizing section.
Modifier classes should be replaced with inline and custom styles (e.g., style=”–bs-columns: 3;” vs class=”row-cols-3″).
Nesting requires resetting column counts for each nested .grid instance.

Three columns

Use .g-col-4 to create three equal-width columns for all devices. Modify the layout based on viewport size using responsive classes based on viewport size.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Three Columns</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-4 bg-info p-2">First Column</div><div class="g-col-4 bg-light p-2">Second Column</div><div class="g-col-4 bg-warning p-2">Third Column</div></div></div></div></body></html>

Responsive

To adjust your layout for different screen sizes, use responsive classes. For example, start with two columns on smaller screens and then expand to three columns on larger screens.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Responsive</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 g-col-md-4 bg-info">First Column</div><div class="g-col-6 g-col-md-4 bg-light">Second Column</div><div class="g-col-6 g-col-md-4 bg-warning">Third Column</div></div></div></div></body></html>

Compare the two-column layout across at all screen sizes.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Two Column Layout</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div></div></div></div></body></html>

Wrapping

Grid items wrap to the next line when there’s no more horizontal space, with gaps applying to both horizontal and vertical spacing.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Wrapping</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>

Starts

Start classes are a shorthand version of CSS Grid’s grid-column-start and grid-column-end properties, used to create grid templates by specifying column starting and ending points.
They are used in combination with column classes for column sizing and alignment, starting from 1 as 0 is not a valid value for these properties.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Starts</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-3 g-start-2 bg-info">First Column</div><div class="g-col-4 g-start-6 bg-warning">Second Column</div></div></div></div></div></body></html>

Auto columns

Without any classes on grid items, they will automatically be sized to one column within a .grid.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Auto Column</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="bg-info">First</div><div class="bg-warning">Second</div><div class="bg-info">Third</div><div class="bg-warning">Four</div><div class="bg-info">Five</div><div class="bg-warning">Six</div><div class="bg-info">Seven</div><div class="bg-warning">Eight</div><div class="bg-info">Nine</div><div class="bg-warning">Ten</div></div></div></div></body></html>

Grid column classes can be combined with this behaviour.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Auto Column</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6">First</div><div>Second</div><div>Third</div><div>Four</div><div>Five</div><div>Six</div><div>Seven</div></div></div></div></body></html>

Nesting

CSS Grid system enables simple nesting of .grids, and unlike the default grid, it inherits modifications made to rows, columns, and gaps. To implement nesting consider the following scenario:

The default number of columns is overridden with a local CSS variable: –bs-columns: 3.
The number of columns in the first auto-column is maintained, and each column takes up one-third of the total width.
set the nested .grid‘s column count to 12 (our default) in the second auto-column.
There are no nested items in the third auto-column.

In comparison to the basic grid structure, this enables more complex and custom layouts in practice.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Nesting</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center p-3" style="--bs-columns: 3;"><div class="bg-secondary text-white">
        First Auto-column
        &lt;div class="grid p-3"&gt;&lt;div class="bg-warning"&gt;1&lt;/div&gt;&lt;div class="bg-info"&gt;2&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="bg-secondary text-white"&gt;
        Second Auto-column
        &lt;div class="grid  p-3" style="--bs-columns: 12;"&gt;&lt;div class="g-col-6 bg-warning"&gt;1&lt;/div&gt;&lt;div class="g-col-4 bg-info"&gt;2&lt;/div&gt;&lt;div class="g-col-2 bg-warning"&gt;3&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="bg-secondary text-white"&gt;Third Auto-column&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Customizing



Customize column and row count, along with gap width, using local CSS variables.



Variable Fallback value Description
--bs-rows 1 The number of rows in your grid template
--bs-columns 12 The number of columns in your grid template
--bs-gap 1.5rem The size of the gap between columns (vertical and horizontal)



CSS variables without default values use fallback values until a local instance is specified. For instance, var(--bs-rows, 1) is used for CSS Grid rows, overriding the fallback value of 1 when --bs-rows is defined.



No grid classes



The grid items within the .grid element will be sized automatically without using .g-col class.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">No Grid Classes</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 3;"><div class="bg-info">First Column</div><div class="bg-light">Second Column</div><div class="bg-warning">Third Column</div></div></div></div></body></html>



Columns and gaps



Let's modify the column count and spacing as demonstrated below:



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Column and Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;"><div class="g-col-2 bg-info">First Column</div><div class="g-col-2 bg-warning">Second Column</div></div></div></div></body></html>



Change the gap and the number of columns using --bs-columns: 10; and --bs-gap: 1rem;.s.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Column and Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-4 bg-warning">Second Column</div></div></div></div></body></html>



Adding rows



Follwing example demonstartes rearranging of columns and increasing the number of rows:



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Adding Rows</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;"><div class="bg-info">First Column</div><div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div><div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div></div></div></div></body></html>



Gaps



Modify only the row-gap to change the vertical gaps in the grids. Use gap on .grids and the row-gap and column-gap can be adjusted as required.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="row-gap: 0;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>



You can specify a single or pair of values for vertical and horizontal gaps using inline style or the CSS variable --bs-gap.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-gap: .25rem 1rem;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>



Sass



One drawback of CSS Grid is that the number of classes generated in the compiled CSS is predetermined by the values of $grid-columns and $grid-gutter-width Sass variables.




Recompile your CSS after changing those default Sass variables.



To enhance the existing classes, use inline or custom styles.




You can modify the column count, gap size, and size using inline styles and predefined CSS Grid column classes (e.g., .g-col-4).https://www.tutorialspoint.com/bootstrap/examples/cssgrid_saas.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Saas</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;"><div class="bg-info" style="grid-column: span 14;">First Column</div><div class="g-col-4 bg-warning">Second Column</div></div></div></div></body></html>

Variable	Fallback value	Description
`--bs-rows`	`1`	The number of rows in your grid template
`--bs-columns`	`12`	The number of columns in your grid template
`--bs-gap`	`1.5rem`	The size of the gap between columns (vertical and horizontal)

September 22, 2025

Utilities
This chapter will discuss about Bootstrap utilities. Several utility classes are used for various changes, such as showing, hiding, aligning, and spacing content, these are used to create mobile-friendly and responsive websites.

Changing display

Bootstrap display properties can be used to configure the display. Mix it with a grid system, content, or component to display or hide them on particular viewports.

Flexbox options
- Bootstrap uses flexbox, but not every element should be to display:flex to avoid overriding and changing browser behaviors. Most of the components are built with flexbox enabled.
- In order to add display: flex to an element, use .d-flex or responsive variants (like .d-sm-flex). Use this class or value to access flexbox utilities for sizing, alignment, spacing, and more.
Margin and padding
- Use margin and padding utilities to modify the element’s spacing and sizing. It has a six-level spacing scale for spacing utilities based on 1rem default $spacer variable.
- You can select certain viewports (e.g., .me-sm-3 for margin-right: 1rem in LTR starting at the sm breakpoint), or values for the viewports (e.g., .me-3 for margin-right: 1rem in LTR).
Toggle visibility

Visibility utilities allow you to toggle an element’s visibility. Invisible elements continue to affectpage layout but are hidden from visitors.
September 22, 2025

Gutters

This chapter will discuss about Bootstrap gutters. Gutter provides padding between your columns. Gutters are used to responsively space and align content.

How it works

Gutters are generated by horizontal padding, and are spaces between the column content. Align the content using padding-right and padding-left on each column.
Gutters begin at a width of 1.5 rem (24px), hence allows us to align grid to the scale of padding and margin spacers.
Adjust gutters with breakpoint-specific classes to change horizontal, vertical, and all other gutters.

Horizontal gutters

.gx-* classes manage the widths of horizontal gutters, and if larger gutters are used, the parent .container or .container-fluid may require adjustment to prevent overflow. This can be done using a padding utility, such as .px-4 as demonstarted in below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container px-4 text-center mt-2"><div class="row gx-5"><div class="col"><div class="p-2 bg-info">First Column</div></div><div class="col"><div class="p-2 bg-warning">Second Column</div></div></div></div></body></html>

Using overflow functionality

Adding a wrapper with the .overflow-hidden class to .row is another option.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container overflow-hidden text-center"><div class="row gx-5 mt-2"><div class="col"><div class="p-2 bg-info">First Column</div></div><div class="col"><div class="p-2 bg-warning">Second Column</div></div></div></div></body></html>

Vertical gutters

The vertical gutter is used for responsive spacing, padding between columns, and aligning content with the grid.
Use .gy-* classes to control vertical gutter widths in a row when column wrapping occurs.
They can cause some overflow below the .row at the end of a page, like the horizontal gutters. To fix this, add a wrapper with .overflow-hidden class around a .row.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container overflow-hidden text-center mt-2"><div class="row gy-5"><div class="col-6"><div class="p-2 bg-info">First Column</div></div><div class="col-6"><div class="p-2 bg-warning">Second Column</div></div><div class="col-6"><div class="p-2 bg-info">Third Column</div></div><div class="col-6"><div class="p-2 bg-warning">Fourth Column</div></div></div></div></body></html>

Horizontal and vertical gutters

To control the horizontal and vertical grid gutters, use .g-* classes. Use smaller gutter width. So, we won’t need of .overflow-hidden wrapper class.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row g-2 mt-2"><div class="col-6"><div class="p-2 bg-info">First Column</div></div><div class="col-6"><div class="p-2 bg-warning">Second Column</div></div><div class="col-6 "><div class="p-2 bg-info">Third Column</div></div><div class="col-6"><div class="p-2 bg-warning">Fourth Column</div></div></div></div></body></html>

Row columns gutters

Gutter classes can be added to row columns with responsive design. Responsive row columns and responsive gutter classes are used in the example below:

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row row-cols-2 row-cols-lg-3 g-2 g-lg-3 mt-2"><div class="col"><div class="p-3 bg-info">First Row column</div></div><div class="col"><div class="p-3 bg-warning">Second Row column</div></div><div class="col"><div class="p-3 bg-info">Third Row column</div></div><div class="col"><div class="p-3 bg-warning">Fourth Row column</div></div><div class="col"><div class="p-3 bg-info">Fifth Row column</div></div><div class="col"><div class="p-3 bg-warning">Sixth Row column</div></div></div></div></body></html>

No gutters

Remove gutters between columns with .g-0 in grid classes. This removes negative margins from .row and horizontal padding from immediate children columns.
Remove the parent .container or .container-fluid to create an edge-to-edge design and add .mx-0 to the .row to prevent overflow.
No gutters eliminates margin and padding for both row and columns.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Gutters</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row g-0 text-center mt-2"><div class="col-sm-4 col-md-6 p-2 bg-info">First Column</div><div class="col-4 col-md-3 p-2 bg-warning">Second Column</div></div></body></html>

September 22, 2025

Columns

This chapter will discuss about Bootstrap columns. The flexbox grid system allows you to modify columns with various alignment, ordering, and offsetting options. Using column classes, you can control the widths of non-grid items.

Before learning how to change and customise your grid columns, be sure to read the Grid page first.

How it works

On the flexbox architecture of the grid, columns are built. Flexbox allows changing of specific columns and groups of columns at the row level.
When creating grid layouts, all content is placed in columns. Bootstrap grid’s hierarchy goes from the container to the row to the column to your content. There may be unforeseen repercussions when you combine the content and column.
For generating responsive layouts, Bootstrap provides predefined classes. Each grid tier has six breakpoints and a dozen of columns. Bootstrap provides many classes to create your desired layouts.

Alignment

Align columns vertically and horizontally using flexbox alignment utilities.

Vertical alignment

Use vertical-alignment utilities to changes the alignment of elements vertically.

Use the align-items-start class to align content vertically at starting position.
Use the align-items-center class to align content vertically at center.
Use the align-items-end class to align content vertically at the end.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><h5>Align the content at start</h5><div class="row align-items-start bg-info mt-4" style="min-height: 80px;"><div class="col bg-warning">
          Tutorialspoint
        </div></div><h5 class="mt-2">Align the content at center</h5><div class="row align-items-center bg-info mt-4" style="min-height: 80px;"><div class="col bg-warning">
          Tutorialspoint
        </div></div><h5 class="mt-2">Align the content at end</h5><div class="row align-items-end bg-info mt-4" style="min-height: 80px;"><div class="col bg-warning">
          s
        </div></div></div></body></html>

Adjust the alignment of each column separately using .align-self-* classes.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center mt-4"><div class="row  bg-warning" style="min-height: 80px;"><div class="col align-self-start bg-info">
        First Column
      &lt;/div&gt;&lt;div class="col align-self-center bg-info"&gt;
        Second Column
      &lt;/div&gt;&lt;div class="col align-self-end bg-info"&gt;
        Third Column
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Horizontal alignment



Horizontal alignment can be alter using justify-content-* classes to align the columns horizontally.




Use justify-content-start to align columns from start.



Use justify-content-center to align columns at the center.



Use justify-content-end to align columns at the end.








Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center mt-4"><h5>Align the columns at start</h5><div class="row justify-content-start bg-info mt-4" style="min-height: 40px;"><div class="col-4 bg-warning">
      First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second Column
    &lt;/div&gt;&lt;/div&gt;&lt;h5 class="mt-4"&gt;Align the columns at center&lt;/h5&gt;&lt;div class="row justify-content-center bg-info mt-4" style="min-height: 40px;"&gt;&lt;div class="col-4  bg-warning"&gt;
     First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second Column
    &lt;/div&gt;&lt;/div&gt;&lt;h5 class="mt-4"&gt;Align the columns at end&lt;/h5&gt;&lt;div class="row justify-content-end bg-info mt-4" style="min-height: 40px;"&gt;&lt;div class="col-4  bg-warning"&gt;
      First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second column
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>



Use justify-content-around to equalise the spacing around the two columns.



Use justify-content-between to add space between the two columns.



Use justify-content-evenly class to add an equal space between the right and left columns of two desired columns.








Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center mt-4"><h5 class="mt-4">Add space between the two columns using justify-content-around</h5><div class="row justify-content-around bg-info mt-4" style="min-height: 40px;"><div class="col-4 bg-warning">
      First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second Column
    &lt;/div&gt;&lt;/div&gt;&lt;h5 class="mt-4"&gt;Add space between the two columns using justify-content-between.&lt;/h5&gt;&lt;div class="row justify-content-between bg-info mt-4" style="min-height: 40px;"&gt;&lt;div class="col-4 bg-warning"&gt;
      First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second Column
    &lt;/div&gt;&lt;/div&gt;&lt;h5 class="mt-4"&gt;Add equal space between columns using justify-content-evenly.&lt;/h5&gt;&lt;div class="row justify-content-evenly bg-info mt-4" style="min-height: 40px;"&gt;&lt;div class="col-4 bg-warning"&gt;
      First Column
    &lt;/div&gt;&lt;div class="col-4 bg-light"&gt;
      Second Column
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Column wrapping



If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><div class="row mt-2"><div class="col-2 bg-warning">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div><div class="col-6 bg-info">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div><div class="col-9 bg-primary">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div></div></div></body></html>



Column breaks



To break the column to a new line in flexbox, add a div element with a 100% width, after the column where you want to break the row. This normally occurs with multiple .rows, although not all implementation methods are suitable for this.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-6 col-sm-3 bg-info">First Column</div><div class="col-6 col-sm-3 bg-warning">Second Column</div><div class="w-100"></div><div class="col-6 col-sm-3 bg-primary">Third Column</div><div class="col-6 col-sm-3 bg-secondary">Fourth Column</div></div></div></body></html>



You can also use responsive display utilities to apply this break at particular breakpoints.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center mt-2"><div class="row"><div class="col-6 col-sm-4  bg-info">First Column</div><div class="col-6 col-sm-4  bg-warning">Second Column</div><div class="w-100 d-none d-md-block"></div><div class="col-6 col-sm-4 bg-primary">Third Column</div><div class="col-6 col-sm-4 bg-light">Fourth Column</div></div></div></body></html>



Reordering



Bootstrap's column order classes adjust the grid system's order based on various screen sizes.



Order classes



The visual order of your content is controlled using .order- classes. Because these classes are responsive, you can sort them by breakpoint (e.g., .order-2 order-md-3). Support for values 1 to 5 across all grid tiers is included. The default number of .order-* classes can be modified via Sass variable.https://www.tutorialspoint.com/bootstrap/examples/columns_order_classes.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row"><div class="col bg-info">
        no order applied.
      &lt;/div&gt;&lt;div class="col order-5 bg-warning"&gt;
        with an order of 5.
      &lt;/div&gt;&lt;div class="col order-1 bg-primary"&gt;
        with an order of 1.
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Additionally, the responsive classes .order-first and .order-last can be used to reorder elements by using order: -1 and order: 6, respectively. You can combine these classes with numbered .order-* classes as required.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center mt-2"><div class="row"><div class="col order-last bg-info">
        First column as ordered last
      &lt;/div&gt;&lt;div class="col order-first bg-primary"&gt;
        Second column as ordered first
      &lt;/div&gt;&lt;div class="col bg-warning"&gt;
        Third column (unordered)
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Offsetting columns



The grid columns offset can be achieved in two ways:




.offset- grid



margin utilities




Grid classes are sized to match columns, While margins are more suitable for quick layouts with variable offset width.



Offset classes



Use .offset-md-* classes to shift the columns from their original position to the right side. These classes add *columns to the left margin of a column. The class .offset-md-4 shifts .col-md-4 to the right by four columns.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-md-2 bg-info p-2">First Column</div></div><div class="row mt-2"><div class="col-md-2 offset-md-3 bg-warning p-2">Second Column</div></div><div class="row mt-2"><div class="col-md-2 offset-md-2 bg-info p-2">Third Column</div></div><div class="row mt-2"><div class="col-md-2 offset-md-4 bg-warning p-2">Fourth Column</div></div></div></body></html>



Column clearing at responsive breakpoints



You need to reset the offsets at responsive breakpoints to clear columns. View the grid example for a demonstration



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-sm-5 col-md-6 bg-warning">First Row First Column</div><div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0 bg-info">First Row Second Column</div></div><div class="row mt-2"><div class="col-sm-6 col-md-5 col-lg-6 bg-warning">Second Row First Column</div><div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0  bg-info">Second Row Second Column</div></div></div></body></html>



Margin utilities



In version 4, flexbox allows you to utilize margin utilities such as .me-auto to separate sibling columns from each other



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-md-4 bg-info"> First Row First Column</div><div class="col-md-4 ms-auto bg-warning">First Row Second Column</div></div><div class="row mt-2"><div class="col-md-3 ms-md-auto bg-info">Second Row First Column</div><div class="col-md-3 ms-md-auto bg-warning">Second Row Second Column</div></div><div class="row mt-2"><div class="col-auto me-auto bg-info">Third Row First Column</div><div class="col-auto bg-warning">Third Row Second Column</div></div></div></body></html>



Standalone column classes



To provide a specific width for an element, use .col-* classes outside a .row. The paddings are omitted when column classes are used as non-direct children of a row.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="col-3 p-2 mb-2 bg-info">
 First Column
&lt;/div&gt;&lt;div class="col-sm-6 p-2 bg-warning"&gt;
  Second Column
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


To create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Columns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="clearfix"><img src="\bootstrap\images\tut.png" class="col-sm-2 float-sm-end mb-2 ms-sm-2" alt="..."><p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p><p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. create responsive floated images, combine the classes with utilities.</p><p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p><p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p></div></body></html>

September 22, 2025

Grid system

This chapter will discuss about Bootstrap grid system. In Bootstrap, Grid system allows up to 12 columns across the page and is built with flexbox

Basic example

Bootstrap’s grid system is a responsive layout tool that uses containers, rows, and columns to align content.
Use a .container class for a responsive fixed width container.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col p-2 bg-primary">
        First Column
      &lt;/div&gt;&lt;div class="col p-2 bg-warning"&gt;
        Second Column
      &lt;/div&gt;&lt;div class="col p-2 bg-info"&gt;
        Third Column
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


How it works




Bootstrap grid supports six responsive breakpoints. Breakpoints affect all sizes above it (such as sm, md, lg, xl, xxl), allowing you to control container and column sizing and behavior at each breakpoint.



Containers center and horizontally pad your content. Use .container for responsive pixel width or .container-fluid for full width across all viewport and device sizes. For various breakpoints the responsive container classes are used.



Rows are wrappers for columns. Each column contains horizontal padding. This padding is then applied to rows with negative margins. In this manner, all the content in the columns, is left-aligned.



Rows supports modification classes for uniform column sizing column sizing and gutter classes for changing the spacing of your text.



Columns are incredibly flexible. You can create various elements combination with any number of columns using one of the 12 template columns available per row.



Column widths are set in percentages for fluid and relative sizing to parent element.



Gutters are responsive and customizable. They are available for all the viewports and are of same size as margin and padding. You can modify gutters by using the .gx-* (for horizontal gutters), .gy-* (for vertical gutters), .g-* (for all gutters) and .g-0 to remove gutters.



To create more semantic markup, you can use predefined grid's source Sass mixins.




There are six classes in Bootstrap Grid System:




Extra small (.col-xs)



Small (.col-sm-)



Medium (.col-md-)



Large (.col-lg-)



Extra large (.col-xl-)



Extra extra large (.col-xxl-)




How the grid varies over these breakpoints is shown in the below table:



Extra small
<576px Small
576px Medium
768px Large
992px X-Large
1200px XX-Large
1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12 - - - - -
Gutter width 1.5rem (.75rem margin on both sides.) - - - - -
Custom gutters Yes - - - - -
Nestable Yes - - - - -
Column ordering Yes - - - - -



Auto-layout columns



For easy column sizing without an explicit numbered class, use breakpoint-specific column classes like .col-sm-6.



Equal-width




Use equal-width grid system to create the grid in equal sizes.



Two grid layouts work on any device size from xs to xxl. For each breakpoint, you can add many unit-less classes, and each column/row will have the same width.





https://www.tutorialspoint.com/bootstrap/examples/grid_equal_width.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><h5>Equal columns</h5><div class="row mt-2"><div class="col  p-2 bg-primary">
        First Column
      &lt;/div&gt;&lt;div class="col  p-2 bg-info"&gt;
        Second Column
      &lt;/div&gt;&lt;/div&gt;&lt;h5&gt;Equal rows&lt;/h5&gt;&lt;div class="col mt-2"&gt;&lt;div class="row  p-2 bg-warning text-white"&gt;
        First Row
      &lt;/div&gt;&lt;div class="row  p-2 bg-secondary text-white"&gt;
        Second Row
      &lt;/div&gt;&lt;div class="row  p-2 bg-success text-white"&gt;
        Third Row
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Setting one column width




You can choose one column width and other columns automatically resize around it.



Use grid classes, mixins, or inline widths. You can resize the other columns no matter the width of the center column.








Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-6  p-2 bg-primary text-white">
        First Column (col-6)
      &lt;/div&gt;&lt;div class="col-3  p-2 bg-secondary text-white"&gt;
       Second Column (col-3)
      &lt;/div&gt;&lt;div class="col p-2 bg-warning text-white"&gt;
        Third Column (col)
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variable width content



Use col-{breakpoint}-auto classes to size columns according to the content's natural width.https://www.tutorialspoint.com/bootstrap/examples/grid_variable_width_content.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row justify-content-md-center mt-2"><div class="col col-lg-2  p-2 bg-primary ">
       First Column
      &lt;/div&gt;&lt;div class="col-md-auto  p-2 bg-info "&gt;
        Second column with variable width content.
      &lt;/div&gt;&lt;div class="col col-lg-2  p-2 bg-warning"&gt;
       Third Column
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Responsive classes



In Bootstrap, grid has six tiers of predefined classes which is used to create complex responsive layouts. You can customize the columns/row to small, medium, large, or extra-large devices.



All breakpoints



Use the .col and .col-* classes for grids that are consistent across all sizes of devices. If you require a column of a specific size then use a numbered class.https://www.tutorialspoint.com/bootstrap/examples/grid_all_breakpoints.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><h5>Columns</h5><div class="row mt-2"><div class="col p-2 bg-primary">First Column</div><div class="col p-2 bg-warning">Second Column</div><div class="col p-2 bg-light">Third Column</div></div><h5>Rows</h5><div class="col mt-2"><div class="row-9 p-2 bg-info">First Row</div><div class="row-3 p-2 bg-success">Second Row</div></div></div></body></html>



Stacked to horizontal



Use .col-sm-* classes to build a simple grid system that is stacked on extra small and small devices and becomes horizontal on larger devices.



Note: Resize the browser to check the effect on various devices.https://www.tutorialspoint.com/bootstrap/examples/grid_stacked_to_horizontal.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><h5>Columns</h5><div class="row mt-2"><div class="col-sm-6 p-2 bg-primary text-white">First Column</div><div class="col-sm-3 p-2 bg-success text-white">Second Column</div><div class="col-sm-2 p-2 bg-dark text-white">Third Column</div></div><h5>Rows</h5><div class="col mt-2"><div class="row-sm p-2 bg-info">First row</div><div class="row-sm p-2 bg-warning">Second row</div></div></div></body></html>



Mix and match



Use a combination of various classes for each tier to easily stack the columns in some grid tiers according to your needs.https://www.tutorialspoint.com/bootstrap/examples/grid_mix_and_match.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-sm-4 p-2 bg-primary text-white">First column of col-sm-4</div><div class="col-3  p-2 bg-secondary text-white">Second column of col-3</div></div><div class="row mt-2"><div class="col-4 col-md-2 p-2 bg-warning text-white">First column of col-4 col-md-2</div><div class="col-4 col-md-2 p-2 bg-secondary text-white">Second column of col-4 col-md-2</div><div class="col-4 col-md-2 p-2 bg-info text-white">Third column of col-4 col-md-2</div></div><div class="row mt-2"><div class="col-sm-3 p-2 bg-dark text-white">First column of col-sm-3</div><div class="col-md-6 p-2 bg-success text-white">Second column of col-md-6</div></div></div></body></html>



Row columns




Bootstrap grid provides row column classes to create simple grid layouts.



Individual rows are included in .row* class.



Individual columns are included in .col* class.



Use .row-cols-* class to set the number of columns in a single row.



Use .row-cols-auto to adjust the column's size based on its content.








Create two different columns using .row-cols-2 class.https://www.tutorialspoint.com/bootstrap/examples/grid_row_columns_2.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row row-cols-2"><div class="col bg-info p-2">First Row First Column</div><div class="col bg-primary p-2">First Row Second Column</div><div class="col bg-warning p-2">Second Row First Column</div></div></div></body></html>



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container  text-center mt-2"><div class="row row-cols-3 mt-2"><div class="col bg-info p-2">First Row First Column</div><div class="col bg-light p-2">First Row Second Column</div><div class="col bg-primary p-2">First Row Third Column</div><div class="col bg-secondary p-2">Second Row First Column</div><div class="col bg-success p-2">Second Row Second Column</div><div class="col bg-warning p-2">Second Row Third Column</div></div></div></body></html>



Create grids of rows and columns using row-cols-auto class.https://www.tutorialspoint.com/bootstrap/examples/grid_row_columns_auto.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row row-cols-auto"><div class="col bg-primary p-2">First Row First Column</div><div class="col bg-secondary p-2">First Row Second Column</div><div class="col bg-warning p-2">First Row Third Column</div><div class="col bg-info p-2">First Row Fourth Column</div><div class="col bg-success p-2">First Row Fifth Column</div><div class="col bg-light p-2">First Row sixth Column</div><div class="col bg-danger p-2">Second Row First Column</div></div></div></body></html>



Create four different columns using row-cols-4 class.https://www.tutorialspoint.com/bootstrap/examples/grid_row_columns_4.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row row-cols-4"><div class="col bg-primary p-2">First Row First Column</div><div class="col bg-secondary p-2">First Row Second Column</div><div class="col bg-warning p-2">First Row Third Column</div><div class="col bg-info p-2">First Row Fourth Column</div><div class="col bg-light p-2">Second Row First Column</div><div class="col bg-danger p-2">Second Row Second Column</div></div></div></body></html>



Using row-cols-1, row-cols-sm-3 and row-cols-md-6 classes.https://www.tutorialspoint.com/bootstrap/examples/grid_row_columns.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row row-cols-1 row-cols-sm-3 row-cols-md-6 mt-2"><div class="col bg-primary p-2">First Row First Column</div><div class="col bg-light p-2">First Row Second Column</div><div class="col bg-warning p-2">First Row Third Column</div><div class="col bg-info p-2">First Row Fourth Column</div><div class="col bg-danger p-2">First Row Fifth Column</div></div></div></body></html>



Using the row-cols() Sass mixin.https://www.tutorialspoint.com/bootstrap/examples/grid_custom_row_columns.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
  .custom_grid{
    @media row-cols(2);
    @media media-breakpoint-up(lg) {
      @media row-cols(6);
    }
  }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container custom_grid text-center"&gt;&lt;div class="row"&gt;&lt;div class="col bg-primary p-2"&gt;First Row First Column&lt;/div&gt;&lt;div class="col bg-light p-2"&gt;First Row Second Column&lt;/div&gt;&lt;div class="col bg-warning p-2"&gt;First Row Third Column&lt;/div&gt;&lt;div class="col bg-info p-2"&gt;First Row Fourth Column&lt;/div&gt;&lt;div class="col bg-danger p-2"&gt;First Row Fifth Column&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Nesting



A nesting grid system adds rows and columns of the grid in single cell of an existing grid. The nested rows should consist of a group of columns whose total does not exceed 12 (it is not necessary to utilize all 12 columns).https://www.tutorialspoint.com/bootstrap/examples/grid_nesting.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Grid</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center"><div class="row mt-2"><div class="col-sm bg-primary p-2">
      First Column
    &lt;/div&gt;&lt;div class="col-sm bg-info p-2"&gt;&lt;div class="container"&gt;&lt;div class="row"&gt;&lt;div class="col col-sm bg-light"&gt;
            Second Column
          &lt;/div&gt;&lt;div class="col col-sm bg-light"&gt;
            Second Column 
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-sm bg-primary p-2"&gt;
      Third Column
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

	Extra small <576px	Small 576px	Medium 768px	Large 992px	X-Large 1200px	XX-Large 1400px
Container max-width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
# of columns	12	-	-	-	-	-
Gutter width	1.5rem (.75rem margin on both sides.)	-	-	-	-	-
Custom gutters	Yes	-	-	-	-	-
Nestable	Yes	-	-	-	-	-
Column ordering	Yes	-	-	-	-	-

September 22, 2025

Containers

This chapter will discuss about Bootstrap containers. Containers are used to pad content within them.

Containers are required for default grid system (Grid system uses a series of containers, rows and columns to align content). Containers are used to contain, pad, and center the content within them. Containers can also be nested, though most layouts don’t require a nested container.

There are three different container classes in Bootstrap:

.container (sets responsive max-widths).
.container-{breakpoint} (width: 100% until specified breakpoint).
.container-fluid (width: 100% at all breakpoints).

How the max-width of the container (when compared to original .container and .container-fluid) varies across each breakpoint is shown in the below table:

Examples of the same can be seen in chapter Grid Demo

	Extra small <576px	Small 576px	Medium 768px	Large 992px	X-Large 1200px	XX-Large 1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Default Containers

Use .container class which creates a responsive fixed-width container.https://www.tutorialspoint.com/bootstrap/examples/default_containers.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Container</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-4"><div class="bg-light"><h2 class="text-success text-center">Tutorialspoints</h2><h5 class="text-primary text-center">Bootstrap - Container</h5><p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.
        Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Responsive Containers




Use responsive containers to declare a class that is 100% wide until the specific breakpoint is reached, after that use max-widths for all subsequent breakpoints.



Use the .container-sm|md|lg|xl classes to decide whether the container should be responsive or not.





https://www.tutorialspoint.com/bootstrap/examples/responsive_containers.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Container</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-sm text-success  border mt-2">Tutorialspoints breakpoint-sm</div><div class="container-md text-success  border mt-2">Tutorialspoints breakpoint-md</div><div class="container-lg text-success  border mt-2">Tutorialspoints breakpoint-lg</div><div class="container-xl text-success  border mt-2">Tutorialspoints breakpoint-xl</div><div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div></body></html>



Fluid Containers



Use the .container-fluid class to create a full width container. They span the entire width of the screen.https://www.tutorialspoint.com/bootstrap/examples/fluid_containers.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Container</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid"><h2 class="text-success text-center">Tutorialspoints</h2><h5 class="text-primary text-center">Bootstrap - Container</h5><p>Container is used to set the margin of the content. It contains row elements and the row elements are containers
      of columns. This is known as the grid system.
      Container is used to set the margin of the content. It contains row elements and the row elements are containers
      of columns.&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Print Page

September 22, 2025