Table of Contents
What is Bootstrap?
- A popular open-source front-end framework called Bootstrap is used to create mobile-first and responsive websites and online apps.
- Originally developed by Twitter, it is currently kept up to date by the open-source community.
- A collection of pre-designed HTML, CSS, and JavaScript elements, including buttons, forms, navigation bars, and more, are made available by Bootstrap to developers so they may create visually appealing and standardized online interfaces.
- It is well-known for having a grid system that makes it simpler to develop layouts that are adaptable to varying screen sizes.
Why Bootstrap?
- Quick Development: Bootstrap offers a selection of UI components and templates that have already been planned and constructed. This speeds up the creation of web apps by saving developers time when creating and styling pieces from scratch.
- Designing with responsiveness: With a focus on mobile first design, Bootstrap makes sure websites and web apps are responsive and function properly across a range of screen sizes and devices. In the mobile-first world of today, this is essential because it expands your audience.
- Continuity: The standardized design features of Bootstrap guarantee a professional and uniform appearance throughout various sections of a website or application. This consistency contributes to the upkeep of a polished and seamless user experience.
- Cross-Browser Integrated: Bootstrap is tested and supported in all major web browsers, avoiding the need for intensive cross-browser testing and debugging.
- Open Source and Free: Because Bootstrap is open-source and distributed under the MIT License, it is cost-free to use for both personal and business projects. For companies and developers, this may be a more affordable option.
- Integrating JavaScript Libraries: JavaScript plugins and components are included in Bootstrap to improve functionality and interactivity. It makes it simple to add dynamic behavior to web pages by integrating with well-known JavaScript frameworks like jQuery.
Getting Bootstrap
- Here are two methods to get Bootstrap:
- Official Bootstrap Website:
- The best way to get Bootstrap and related resources is via the official Bootstrap website. The website can be accessed at https://getbootstrap.com/.
- There you’ll discover documentation, examples, and customization options in addition to being able to access and download the most recent version of Bootstrap.
- CDN (Content Delivery Network):
- With a Content Delivery Network (CDN), you can simply include Bootstrap into your web projects.
- You can utilize Bootstrap in a handy way by doing this instead of downloading and hosting the files yourself. Take a look at this example of using CDN for bootstrapping:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>Bootstrap Layout
Container
- To assist you in managing the width and layout of the content on your website, Bootstrap offers a number of container classes.
- The container class comes in two varieties:
- .container
- A fixed-width container with a responsive layout is created with the .container class.
- It works well for content that you want to center in the center of the viewport, have responsive padding in both sides.
<div class="container">
<!-- Your content goes here -->
</div>- .container-fluid
- A full-width container that expands the full width of the viewport is produced by the .container-fluid class.
- When you want your content to extend and occupy the full width of the screen, it’s helpful.
<div class="container-fluid">
<!-- Your content goes here -->
</div>How to create webpage with bootstrap
- As Bootstrap makes use of HTML elements and CSS features, the HTML5 doctype is necessary.
- The HTML5 doctype, the lang attribute, and the appropriate character set should always be included at the top of the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>- For correct display and touch zoom functionality, insert the subsequent <meta> tag within the <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">- The “width=device-width” portion configures the page’s width to adapt to the screen width of the device, which can differ depending on the specific device being used.
- The “initial-scale=1” component establishes the initial zoom level applied when the browser loads the page for the first time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Container class Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container" style="border:1px solid;">
<h1>This is Container Example</h1>
<p>Hello This is Bhavan's Shree HJDOSHI Jamnagar</p>
</div>
<br>
<div class="container-fluid" style="border:1px solid;">
<h1>This is Container Example</h1>
<p>Hello This is Bhavan's Shree HJDOSHI Jamnagar</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>Bootstrap Grid System (Row & Column)
- The Bootstrap grid system permits a maximum of 12 columns across the page.
- If you prefer not to employ all 12 columns individually, you can combine them to form broader columns:
| Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 | Col 1 |
| Col 4 | Col 4 | Col 4 | |||||||||
| Col 4 | Col 8 | ||||||||||
| Col 6 | Col 6 | ||||||||||
| Col 12 | |||||||||||
Grid System Structure
- Bootstrap’s grid structure is responsive, and the columns will re-organize automatically based on screen size.
- Responsive Classes
- The Bootstrap grid system is divided into five responsive classes:
- xs (device with screens less than 576px)
- sm (device with screens that are 576px or larger)
- md (device with screens of 768px or larger)
- lg (device with screens of 992px or larger)
- xl (device with screens of 1200px or larger)
- xxl (device with screens of 1400px or larger)
- The above classes can be combined to build more dynamic and adaptable layouts.
- A Bootstrap Grid’s Basic Structure
- A Bootstrap grid has the following fundamental structure:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>- To begin, make a row (div class=”row”>). Then, insert the desired number of columns (tags with.col-*-* classes). It should be noted that the numbers in.col-*-* should always add up to 12 for each row.
- Let us check with example below.
<body>
<div class="container-fluid">
<h1>Bhavan's HJDOSHI Jamnagar</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:cyan;">Small Col 4</div>
<div class="col-sm-4" style="background-color:pink;">Small Col 4</div>
<div class="col-sm-4" style="background-color:lavender;">Small Col 4</div>
</div>
</div>
</body>
</html>- Reordering Columns
- Order classes
- Reordering in Bootstrap refers to the ability to change the visible order of columns within a grid layout, particularly for responsive design.
- This feature is accomplished by using responsive utility classes to specify the arrangement of columns on different screen sizes or devices.
- Bootstrap has responsive classes for organizing columns based on screen size. You can change the arrangement of columns on extra-small (xs), small (sm), medium (md), large (lg), and extra-large (xl) displays using these classes.
- The responsive classes for reordering columns are as follows:
- .order-*: This class is used to order columns. Columns with higher order values will appear later in the layout, as indicated by the *. All columns have an order value of 0 by default.
- Example 1
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-2" style="background-color:cyan;">Second Column</div>
<div class="col-md-4 order-1" style="background-color:pink;">First Column</div>
</div>
</div>
</body>
</html>- Example 2
<div class="container-fluid text-center">
<div class="row">
<div class="col" style="background-color:cyan;">
First, no order applied
</div>
<div class="col order-5" style="background-color:Pink;">
Second, with a larger order(5)
</div>
<div class="col order-1" style="background-color:Lavender;">
Third, with an order of 1
</div>
</div>
</div>- There are additionally responsive.order-first and.order-last classes that use order: -1 and order: 6 to adjust the order of an element.
- As needed, these classes can be mixed in with the numbered.order-* classes.
- Example 3
<div class="container text-center">
<div class="row" style="background-color:cyan;">
<div class="col order-last">
First, ordered last
</div>
<div class="col" style="background-color:Pink;">
Second, unordered
</div>
<div class="col order-first" style="background-color:Lavender;">
Third, ordered first
</div>
</div>
</div>- Offsetting columns
- To offset grid columns, responsive .offset- grid classes are used.
- Grid classes are proportioned to match columns.
- Offset classes
- Using the .offset-md-* classes, you can move columns to the right.
- These classes extend a column’s left margin by * columns.
- For example, .offset-md-4 movesover four columns, use col-md-4.
- Example 1
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="background-color:cyan;">col-md-4</div>
<div class="col-md-4 offset-md-4" style="background-color:pink;">col-md-4 offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3" style="background-color:lavender;">col-md-3 offset-md-3</div>
<div class="col-md-3 offset-md-3" style="background-color:cyan;">col-md-3 offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3" style="background-color:pink;">col-md-6 offset-md-3</div>
</div>
<div class="row">
<div class="col-md-1" style="background-color:pink;">col 1</div>
<div class="col-md-1" style="background-color:beige;">col 1</div>
<div class="col-md-1" style="background-color:purple;">col 1</div>
<div class="col-md-1" style="background-color:pink;">col 1</div>
<div class="col-md-1" style="background-color:green;">col 1</div>
<div class="col-md-1" style="background-color:lavender;">col 1</div>
<div class="col-md-1" style="background-color:pink;">col 1</div>
<div class="col-md-1" style="background-color:yellow;">col 1</div>
<div class="col-md-1" style="background-color:lightblue;">col 1</div>
<div class="col-md-1" style="background-color:pink;">col 1</div>
<div class="col-md-1" style="background-color:beige;">col 1</div>
<div class="col-md-1" style="background-color:cyan;">col 1</div>
</div>
</div>Bootstrap Content
Typography
- Headings <h1> – <h6>: Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size.
- Example
<h1>This is H J Doshi Jamnagar</h1>
<h2>This is H J Doshi Jamnagar</h2>
<h3>This is H J Doshi Jamnagar</h3>
<h4>This is H J Doshi Jamnagar</h4>
<h5>This is H J Doshi Jamnagar</h5>
<h6>This is H J Doshi Jamnagar</h6>- You can also use the .h1 to.h6 classes on other components to have them act like headings:
- Example
<p class="h1">This is Bootstrap heading class</p>
<p class="h2">This is Bootstrap heading class</p>
<p class="h3">This is Bootstrap heading class</p>
<p class="h4">This is Bootstrap heading class</p>
<p class="h5">This is Bootstrap heading class</p>
<p class="h6">This is Bootstrap heading class</p>- Display Headings
- Traditional heading components are intended to be used in the body of your page content. Consider utilizing a show heading—a larger, slightly more expressive heading style—when you need a heading to stand out.
- Example
<h1 class="display-1">H J Doshi</h1>
<h1 class="display-2">H J Doshi</h1>
<h1 class="display-3">H J Doshi</h1>
<h1 class="display-4">H J Doshi</h1>
<h1 class="display-5">H J Doshi</h1>
<h1 class="display-6">H J Doshi</h1>- Lead Paragraph
- The introductory or opening paragraph of a piece of content, such as an article or blog post is lead paragraph.
- It is often styled differently to make it stand out from the rest of the text and to grab the reader’s attention.
- You can style a lead paragraph in Bootstrap by using its typography class .lead to the paragraph element.
- Example
<p class="lead">This is H J Doshi Information Technology Institute.</p>- Inline Text Elements
- Bootstrap provides several inline text elements that allow you to style and emphasize text within your HTML content.
- These elements are designed to enhance the visual presentation of text without the need for custom CSS styles.
<p>Hi I am a Professor at <mark> H J Doshi I T Institute</mark> Jamnagar.</p>
<p><del>This line behaves as deleted line.</del></p>
<p><ins>This line behaves as an insertion to the document.</ins></p>
<p><u>Hi This is Swati Lathia</u></p>
<p><small>This line behaves as small fonts.</small></p>
<p><strong>This line behaves as bold text.</strong></p>
<p><em>Hello everyone.</em></p>- Note: You can use the following classes instead:
- .mark will apply the same styles as <mark>.
- .small will apply the same styles as <small>.
- .text-decoration-underline will apply the same styles as <u>.
- Abbreviations
- It stylizes implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover.
- Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
- Example
<p>This is <abbr title="Cascading Style Sheet">CSS</abbr></p>
<p>This is <abbr title="HyperText Markup Language">HTML</abbr></p>- List
- Unstyled List
- It removes the default list-style and left margin on list items (immediate children only).
- This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Unstyled List
- Example
<div class="container-fluid">
<h2>Unstyled List</h2>
<ul class="list-unstyled">
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
</ul>
</div>- Inline List
- It removes a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
- Example
<ul class="list-inline">
<li class="list-inline-item">HTML</li>
<li class="list-inline-item">JavaScript</li>
<li class="list-inline-item">CSS</li>
</ul>- Description list alignment
- It aligns terms and descriptions horizontally by using our grid system’s predefined.
- Example
<dl class="row">
<dt class="col-sm-3">Internet</dt>
<dd class="col-sm-9">A network of computers in world wide web</dd>
<dt class="col-sm-3">HTML</dt>
<dd class="col-sm-9">
<p>HyperText Markup Language</p>
<p>This is a markup language to design static webpage</p>
</dd>
<dt class="col-sm-3">CSS</dt>
<dd class="col-sm-9">This is used to style HTML elements</dd>
<dt class="col-sm-3">JavaScript</dt>
<dd class="col-sm-9">This is Object Oriented language.</dd>
</dl>Tables
- Bootstrap’s tables are opt-in due to the frequent use of <table> elements in third-party widgets such as calendars and date pickers.
- Add the .table base class to any <table>, then extend with our optional modifier classes or custom styles.
- Example
<table class="table">
<tr class="table-primary">
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr class="table-secondary">
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr class="table-secondary">
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- You can use contextual classes to color tables, table rows or individual cells.
- Example
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td></tr>- Accented Tables
- Striped rows
- You can use table-striped to add zebra-striping to any table row within the <tbody>
- Striped rows
- Example
<table class="table table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>
<table class="table table-primary table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>
<table class="table table-dark table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Hoverable rows
- You can add .table-hover to enable a hover state on table rows within a <tbody>.
- These hoverable rows can also be combined with the striped variant.
- Example
<table class="table table-striped table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Active tables
- You can highlight a table row or cell by adding a .table-active class.
- Example
<table class="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr class="table-active">
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td class="table-active">Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Table borders
- You can add .table-bordered for borders on all sides of the table and cells.
- Example
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Border Color
- These utilities can be added to change colors: border-primary, border-secondary, etc.
<table class="table table-bordered border-success">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Narendra</td>
<td>Modi</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Tables without borders
- You can add .table-borderless for a table without borders.
<table class="table table-borderless">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Sakshi</td>
<td>Malik</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
</tr>
</table>- Small tables
- .table-sm class is used to create smaller, more compact tables.
- It reduces the padding and overall size of the table and its cells, making it ideal for situations where you want to display a table with less space between rows and columns.
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sakshi</td>
<td>Malik</td>
<td>Haryana</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>Chopra</td>
<td>Haryana</td>
</tr>
</tbody>
</table>- Vertical Alignment of Table
- You can choose from .align-top, .align-middle, .align-bottom as needed in table row or column.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Term</th>
<th>Explanation</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-bottom">1</td>
<td class="align-top">CSS</td>
<td class="align-middle">It is a stylesheet language used for describing the presentation and formatting of a document written in HTML (Hypertext Markup Language). CSS allows web developers and designers to control how web pages and elements within those pages are displayed on different devices and screen sizes. CSS separates the content of a web page (structured using HTML) from its presentation (defined using CSS). This separation makes it easier to maintain and update websites because you can change the appearance of a site without altering its underlying content.</td>
</tr>
<tr>
<td class="align-bottom">2</td>
<td class="align-top">Bootstrap</td>
<td class="align-middle">Bootstrap is a popular open-source front-end framework used for building responsive and visually appealing websites and web applications. It was originally created by Twitter and is now maintained by the Bootstrap community. Bootstrap provides a collection of pre-designed HTML, CSS, and JavaScript components and utilities that make it easier and faster to create web interfaces. </td>
</tr>
</tbody>
</table>- Table head
- Similar to tables and dark tables, you can use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
<table class="table">
<thead class="table-light">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sakshi</td>
<td>Malik</td>
<td>Haryana</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>Chopra</td>
<td>Haryana</td>
</tr>
</tbody>
</table>
<!—thead dark- ->
<table class="table">
<thead class="table-dark">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sakshi</td>
<td>Malik</td>
<td>Haryana</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>Chopra</td>
<td>Haryana</td>
</tr>
</tbody>
</table>- Table foot
<table class="table table-bordered caption-top">
<caption>List of definition</caption>
<thead>
<tr>
<th>#</th>
<th>Term</th>
<th>Explanation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CSS</td>
<td>It is a stylesheet language used for describing the presentation and formatting of a document written in HTML (Hypertext Markup Language). CSS allows web developers and designers to control how web pages and elements within those pages are displayed on different devices and screen sizes. CSS separates the content of a web page (structured using HTML) from its presentation (defined using CSS). This separation makes it easier to maintain and update websites because you can change the appearance of a site without altering its underlying content.</td>
</tr>
<tr>
<td>2</td>
<td>Bootstrap</td>
<td>Bootstrap is a popular open-source front-end framework used for building responsive and visually appealing websites and web applications. It was originally created by Twitter and is now maintained by the Bootstrap community. Bootstrap provides a collection of pre-designed HTML, CSS, and JavaScript components and utilities that make it easier and faster to create web interfaces. </td>
</tr>
<tfoot>
<td align=center colspan=3>By Swati Lathia</td>
</tfoot>
</tbody>
</table>- Responsible Table
- .table-responsive class is used to create a responsive behavior for HTML tables.
- When you apply this class to a div that wraps around a table, it enables horizontal scrolling on smaller screens when the table’s content overflows its container horizontally.
- This ensures that users can still view the entire table’s content, even on narrow screens, without the need for the content to be truncated or hidden.
<div class="container">
<h2>Responsive Table Example</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Institute</th>
<th>Website</th>
<th>City - State</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Swati</td>
<td>Lathia</td>
<td>Bhavan's Shree H J Doshi Information Technology Institute</td>
<td>https://swatilathia.com/</td>
<td>Jamnagar - Gujarat</td>
<td>Bharat</td>
</tr>
</tbody>
</table>
</div>
</div>- The div with the class .table-responsive serves as a wrapper around the table element.
- The table itself has the class .table, which is a Bootstrap class used to style tables.
- By using .table-responsive, you ensure that when the table’s content exceeds the width of its parent container like smaller screens or narrower viewports, the user can horizontally scroll to view the hidden content without it breaking the layout or getting cut off.
- This responsive behavior is particularly useful when you have tables with many columns or when the table content is too wide to fit within the available screen width.
- It helps maintain the usability and readability of tables on various devices.
- Note: You can also use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint.
Images
- In this topic, we are using class to make responsive images so they never grow larger than their parent components and providing lightweight styles to them.
- Responsive Images
- With .img-fluid, images in Bootstrap are made responsive.
- This gives the picture max-width: 100%; and height: auto; so that it scales with the parent element.
<img src="" class="img-fluid" alt="Image description">- Image thumbnails
- You can give an image a rounded 1px border by using .img-thumbnail.
<img src="" class="img-thumbnail" alt="Image description ">- Aligning images
- You can use the assistance float classes (float-start and float-end) or text alignment classes to align images.
- The.mx-auto margin utility class can be used to center block-level graphics.
<img src="" class="rounded float-start" alt="rose" width='300' height=300>
<img src="" class="rounded float-end" alt="rose" width='300' height=300><!-- d-block is division block -->
<img src="rose.jfif" class="mx-auto d-block rounded" alt="rose" width='300' height=300>
<!-- you can also use <div> with class text-center -->
<div class="text-center">
<img src="rose.jfif" class="rounded" alt="rose" width='300' height=300>
</div>Forms
- Form controls in Bootstrap extend form designs with classes. Use these classes to provide customized rendering across browsers and devices.
- To take advantage of additional input controls such as email verification, number selection, and more, make sure to utilize an appropriate type property on all inputs (e.g., email for email address or number for numerical information).
- It includes form controls, select, checks and radios, floating labels and layout
Form controls : input, textarea and label
- Custom styles, sizing, focus states, and other features can be used to modify textual form controls like <input>s and <textarea>s.
<form>
<div class="mb-3">
<label for="i1" class="form-label">Email address</label>
<input type="email" class="form-control" id="i1" placeholder="uname@something.com">
</div>
<div class="mb-3">
<label for="t1" class="form-label">Address</label>
<textarea class="form-control" id="t1" rows="3"></textarea>
</div>
<button type=submit class="btn btn-primary">Submit Me</button>
</form>- Sizing: You can set heights using classes like .form-control-lg and .form-control-sm.
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder="large">
</div>
<div class="mb-3">
<input class="form-control" type="text" placeholder="Default input">
</div>
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder="small">
</div>- Disabled: You can add the disabled Boolean attribute on an input to give it a grayed out appearance and remove pointer events.
<input class="form-control" type="text" placeholder="Disabled input" disabled>- Readonly: You can add the readonly boolean attribute on an input to prevent modification of the input’s value.
<input class="form-control" type="text" value="This is readonly value" readonly>File input
- You can select one or more files from the required path
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div class="mb-3">
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>Color Picker
- You can use the color picker with form-control-color class
<label for="colorinput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="colorinput">Datalists
- Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>.
- These are similar to <select> elements, but come with more menu styling limitations and differences.
- While most browsers and operating systems include some support for <datalist> elements, their styling is inconsistent at best.
<label for="dl" class="form-label">City</label>
<input class="form-control" list="dloptions" id="dl" placeholder="Type here to search">
<datalist id="dloptions">
<option value="Jamnagar">
<option value="Rajkot">
<option value="Surat">
<option value="Bhavangar">
<option value="Surendranagar">
</datalist>Select
- You can create custom CSS to alter the native <select> elements’ default appearance. To activate the custom styles, custom <select> menus just require the custom class .form-select.
- Due to browser restrictions, custom styles are only able to alter the <select>’s default appearance and cannot change the <options>.
- You can set the size of <select> using .form-select-lg for large menu and .form-select-sm for small menu.
- You can select multiple options too using multiple attribute.
- You can add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
<!-- default select options -->
<select class="form-select mb-3">
<option selected>Select your Subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<!-- Sizing -->
<select class="form-select form-select-lg mb-3">
<option selected>Select your Subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<select class="form-select form-select-sm mb-3">
<option selected>Select your Subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<!-- multiple options -->
<select class="form-select mb-3" multiple>
<option selected>Select your Subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<!-- size of options -->
<select class="form-select mb-3" size="3">
<option selected>Select your subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Bootstrap">Bootstrap</option>
</select>
<!-- Disabled -->
<select class="form-select" disabled>
<option selected>Select your subject</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>Checks and Radios
- You can create consistent cross-browser and cross-device checkboxes and radios with completely rewritten checks component.
- With the use of .form-check, a set of classes for both input types that enhances the style and behavior of their HTML elements, more customization and cross-browser consistency are provided.
- Browser default checkboxes and radio buttons are replaced.
- Checkboxes allow you to choose one or more alternatives from a list, whereas radio buttons only allow you to choose one.
<!--default check box -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="c1">
<label class="form-check-label" for="c1">
CSS
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="c2" checked>
<label class="form-check-label" for="c2">
Bootstrap
</label>
</div>
<!- -Radio button - ->
<div class="form-check">
<input class="form-check-input" type="radio" name="rd" id="r1">
<label class="form-check-label" for="r1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="rd" id="r2" checked>
<label class="form-check-label" for="r2">
Female
</label>
</div>Floating Labels
- It makes elegantly easy form labels that hover above your input fields.
- To allow floating labels with Bootstrap’s textual form fields, wrap a pair of <input class=”form-control”> and <label> components in .form-floating.
- There must be a placeholder on every <input>.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="fi1" placeholder="uname@abc.com">
<label for="fi1">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="fi2" placeholder="Password">
<label for="fi2">Password</label>
</div>Layout
- With form layout options, you can provide structure to your forms by using inline, horizontal, or custom grid implementations.
- Let us check simple form example with lnputs and labels
<div class="mb-3">
<label for="i1" class="form-label">First Name</label>
<input type="text" class="form-control" id="i1" placeholder="Enter first name here">
</div>
<div class="mb-3">
<label for="i2" class="form-label">Last Name</label>
<input type="text" class="form-control" id="i2" placeholder="Enter last name here">
</div>Form grid
- Grid classes can be used to create more complex forms. These should be used for form layouts that need many columns, different widths, and more alignment choices.
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>Horizontal form
- By adding the .row class to form groups and the .col-*-* classes to set the width of your labels and controls, you may create horizontal forms using the grid.
- If you want your <label>s to be vertically centered with the form controls they are linked with, make sure to add.col-form-label to them as well.
<form>
<div class="row mb-3">
<label for="i1" class="col-2 col-form-label">Email</label>
<div class="col-10">
<input type="email" class="form-control" id="i1">
</div>
</div>
<div class="row mb-3">
<label for="i2" class="col-2 col-form-label">Password</label>
<div class="col-10">
<input type="password" class="form-control" id="i2">
</div>
</div>
<button type="submit" class="btnbtn-primary">Sign in</button>
</form>Bootstrap Components
Navs and tabs
- Bootstrap includes navigation components for different styles.
- Base nav: The base .nav class, as well as the active and disabled states, is all shared in the overall markup and styles of the Bootstrap navigation.
- You can use <nav> with class .nav too
<!-- nav with ul li -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" aria-disabled="true">Disabled Link</a>
</li>
</ul>
<!-- nav example -->
<nav class="nav">
<a class="nav-link" href="#">Link 1</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link" href="#">Link 3</a>
<a class="nav-link disabled" href="#" aria-disabled="true">Disabled</a>
</nav>- You can change the style of .navs component with modifiers and utilities. You just need to mix and match as needed, or build your own.
- Horizontal alignment
- You can change the horizontal alignment of your nav with flexbox utilities.
- By default, navs are left-aligned, but you can easily change them to center or right aligned.
- Centered with .justify-content-center:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>- Right-aligned with .justify-content-end:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>- Vertical
- You just need to use .flex-column class to make them vertical.
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>- Tabs
- You just need to use .nav and adds the .nav-tabs class to generate a tabbed interface.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>Navbar
- In Bootstrap, a navbar (short for “navigation bar”) is a flexible and responsive navigation component that provides a way to display links and content (like logos, dropdowns, buttons, etc.) at the top of your webpage. It typically contains links to navigate between different sections of a website or application.
- The Bootstrap Navbar component is designed to be responsive, meaning it can adapt to different screen sizes and devices. On smaller screens (like mobile devices), the navbar can collapse into a “hamburger” menu that users can click to reveal the navigation options.
- Basic Structure of a Navbar in Bootstrap:
- The basic structure of a navbar typically includes:
- Navbar Container: The outer wrapper element with classes like
navbar,navbar-expand-{breakpoint}, andnavbar-lightornavbar-dark. - Navbar Brand: A brand or logo that is usually placed on the left side of the navbar, often using the
navbar-brandclass. - Navbar Links: The navigation items (links) that you want to display inside the navbar, typically wrapped inside a
navbar-navclass. - Toggler: A button that appears on smaller screen sizes to collapse/expand the navbar content.
- Navbar Toggle: The icon/button to toggle the visibility of the navbar links when in a collapsed state on small screens.
- Navbar Container: The outer wrapper element with classes like
- Example
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">HJD</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#d1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="d1">
<ul class="navbar-nav">
<li class="nav-item "><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Disabled Link</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">HJD</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#d1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="d1">
<ul class="navbar-nav">
<li class="nav-item "><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action 1</a></li>
<li><a class="dropdown-item" href="#">Action 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link disabled">Disabled Link</a></li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>Dropdowns
- A dropdown is used as a UI component that allows you to create a menu of options or links that can be triggered to expand and show additional content when clicked or hovered over.
- Bootstrap provides a simple and flexible way to create dropdowns for various purposes, such as navigation menus, user account options, and more.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown Button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
</ul>
</div>- The <div class=”dropdown”> element represents the container for the dropdown component.
- The <button> element with the class btn btn-primary serves as the dropdown trigger.
- The data-bs-toggle=”dropdown” attribute is used to specify the toggle behavior.
- The <ul class=”dropdown-menu”> element contains the actual dropdown menu items, which are represented as list items with links.
- Another example with btn-group and different variants.
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Option 4</a></li>
</ul>
<button class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<button class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>- Split button
- We can create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
<div class="btn-group">
<button class="btn btn-danger">Action</button>
<button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Location 1</a></li>
<li><a class="dropdown-item" href="#">Location 2</a></li>
<li><a class="dropdown-item" href="#">Location 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Location 4</a></li>
</ul>
<button class="btn btn-warning">Action</button>
<button class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Location 1</a></li>
<li><a class="dropdown-item" href="#">Location 2</a></li>
<li><a class="dropdown-item" href="#">Location 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Location 4</a></li>
</ul>
</div>Breadcrumb
- It shows the current page’s position in a navigation hierarchy by automatically including separators using CSS.
- You can create a simple breadcrumb with minimal styling by using either an ordered or unordered list with linked list items.
- If you wish to customize the appearance further, you can make use of other utility classes.
- You can add different type of divider like ‘>’ using CSS style=”–bs-breadcrumb-divider:’>’”.
<!-- Breadcrumb example -->
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Category</a></li>
<li class="breadcrumb-item"><a href="#">Product</a></li>
<li class="breadcrumb-item active">Item 1</li>
</ol>
</nav>
<br><hr>
<!-- Styling with different divider -->
<nav style="--bs-breadcrumb-divider:'>';">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Category</a></li>
<li class="breadcrumb-item"><a href="#">Product</a></li>
<li class="breadcrumb-item active">Item 1</li>
</ol>
</nav> Buttons
- You can use the custom button styles provided by Bootstrap for actions in forms, dialogs, and more. These styles support various button sizes and states.
- Bootstrap comes with a variety of predefined button styles, each having a distinct semantic function and a few extras for further control.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>- Button tags
- The <button> element is intended to be used in conjunction with the .btn classes.
- The <a> and <input> elements can also utilize these classes.
<a class="btn btn-primary" href="#">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">- Outline buttons
- You want a button, but you don’t want the strong backdrop colors they bring.
- To exclude all background colors and pictures from any button, substitute the .btn-outline-* modifier classes for the default ones.
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>- Sizes: You can choose bigger or smaller buttons. You can add .btn-lg or .btn-sm for more sizes.
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-secondary btn-lg">Large button</button>
<br><br>
<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-secondary btn-sm">Small button</button>- Disabled state: Add the disabled boolean attribute to any button> element to make buttons appear dormant.
<button class="btn btn-lg btn-primary" disabled>Primary button</button>
<button class="btn btn-secondary btn-lg" disabled>Button</button>- Button Groups
- You can group a series of buttons together on a single line or stack them in a vertical column.
- To make a group of buttons, wrap a series of buttons with .btn in .btn-group.
<div class="btn-group">
<button class="btn btn-primary">Left button</button>
<button class="btn btn-primary">Middle button</button>
<button class="btn btn-primary">Right button</button>
</div>- These classes can also be added to groups of links
<div class="btn-group">
<a href="#" class="btn btn-primary active">Active link 1</a>
<a href="#" class="btn btn-primary">Link 2</a>
<a href="#" class="btn btn-primary">Link 3</a>
</div>- Mixed Styles
<div class="btn-group">
<button class="btn btn-danger">Left Button</button>
<button class="btn btn-warning">Middle Button</button>
<button class="btn btn-success">Right Button</button>
</div>- Outlined Styles
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>- Radio button and Check Box Groups
<!-- Check box group -->
<div class="btn-group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<br><br>
<!-- radio button group -->
<div class="btn-group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" >
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>- Sizing
- You can make buttons larger or smaller by applying button sizing classes to them. Bootstrap provides a set of classes for button sizing:
- .btn-lg: This class makes the button larger.
- .btn-sm: This class makes the button smaller.
<button type="button" class="btn btn-lg btn-primary">Large Button</button>
<button type="button" class="btn btn-primary">Default Size Button</button>
<button type="button" class="btn btn-sm btn-primary">Small Button</button>- Vertical variation
- Make a set of buttons appear vertically stacked rather than horizontally
<div class="btn-group-vertical">
<button type="button" class="btn btn-outline-primary">Large Button</button>
<button type="button" class="btn btn-outline-primary">Default Size Button</button>
<button type="button" class="btn btn-outline-primary">Small Button</button>
</div>Pagination
- Working with previous and next link
- It is used to show pagination to indicate a series of related content exists across multiple pages.
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>- Working with icons
- You can use an icon or symbol in place of text for some pagination links.
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">«</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
</nav>- Sizing
- You can add .pagination-lg or .pagination-sm for additional sizes.
<nav>
<ul class="pagination pagination-lg">
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<br><br>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>Alerts
- With a limited number of available and adaptable alert messages, it provides contextual feedback messages for common user behaviors.
- Any amount of text can have an alert, and there is also an optional close button.
- You can use one of the eight necessary contextual classes (such as.alert-success) for the right styling.
<div class="alert alert-primary">
This is Primary alert
</div>
<div class="alert alert-secondary">
This is Secondary alert
</div>
<div class="alert alert-success">
This is Success alert
</div>
<div class="alert alert-danger">
This is Danger alert
</div>
<div class="alert alert-warning">
This is Warning alert
</div>
<div class="alert alert-info">
This is Information alert
</div>
<div class="alert alert-light">
This is Light alert
</div>
<div class="alert alert-dark">
This is Dark alert
</div> - Link color
- You can use the .alert-link utility class to quickly provide matching colored links within any alert.
<div class="alert alert-primary">
This is Primary alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-secondary">
This is secondary alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-success">
This is success alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-danger">
This is danger alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-warning">
This is warning alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-info">
This is info alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-light">
This is light alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-dark">
This is dark alert with <a href="#" class="alert-link">an example link</a>
</div>- Dismissing
- You can add a close button and the .alert-dismissible class, which places the close button and provides extra padding to the right of the alert.
- You can add the attribute data-bs-dismiss=”alert” to the close button to activate JavaScript capability. Use the button> element together with it to ensure optimal device behavior.
<div class="alert alert-warning alert-dismissible">
<strong>Hey Students!</strong> You must wear your I-Card.
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>Progress Bars
- In Bootstrap, a progress bar shows how a task or process is progressing visually.
- It is frequently used to show the progress of an action, such as loading content, submitting a form, or doing any other lengthy task.
<div class="progress">
<div class="progress-bar aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar” style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar” style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar" style="width:100%"aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div> - Here, <div class=”progress”> is a container element with the class “progress.” It serves as the outer container for the progress bar, providing the structural layout.
- <div class=”progress-bar”> is the actual progress bar element. It has the class “progress-bar,” indicating that it’s a Bootstrap progress bar. The role attribute is set to “progressbar,” indicating its role as a progress bar for accessibility.
- style=”width: 25%”, inline style sets the width of the progress bar to 25%. This means that, visually, the progress bar is filled to 25% of its total length, indicating that the associated task or process is 25% complete.
- aria-valuenow=”25″, aria-valuenow attribute specifies the current value of the progress bar, which is set to 25 in this case, matching the visual width of the progress bar.
- aria-valuemin=”0″ and aria-valuemax=”100″ attributes specify the minimum and maximum values for the progress bar. In this example, the minimum value is set to 0, and the maximum value is set to 100, which is common for percentage-based progress bars.
- This code creates a progress bar that visually indicates a task or process is 25% complete. The aria-valuenow attribute and the style attribute’s width setting are synchronized to represent the same progress level.
- You can also use .progress-bar w-75 to set the width of style of bar.
<div class="progress">
<div class="progress-bar w-75" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>- Labels
- You can add labels to your progress bars by placing text within the .progress-bar.
<div class="progress">
<div class="progress-bar w-25" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>- Height
- We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
- Backgrounds
- You can use background utility classes to change the appearance of individual progress bars.
<div class="progress" style="height: 10px;">
<div class="progress-bar w-25 bg-success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress" style="height: 20px;">
<div class="progress-bar w-25 bg-info" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress" style="height: 10px;">
<div class="progress-bar w-25 bg-warning" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress" style="height: 20px;">
<div class="progress-bar w-25 bg-danger" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress" style="height: 10px;">
<div class="progress-bar w-25 bg-dark" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress" style="height: 20px;">
<div class="progress-bar w-25 bg-light" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>- Striped
- Just add .progress-bar-striped to any .progress-bar to apply a stripe over the progress bar’s background color.
- Animated Striped
- Just add .progress-bar-animated to .progress-bar to animate the stripes.
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>Accordion
- In Bootstrap, an accordion is a component that allows you to create collapsible content sections, typically used to display information in an organized and space-efficient manner.
- It’s a great way to present a list of items with associated content, such as frequently asked questions (FAQs) or panels of information that users can expand and collapse as needed.
<div id="myAccordion" class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">Accordion Item #1 </button>
</h2>
<div id="collapse1" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="accordion-body">
Content for Accordion Item #1 goes here.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">Accordion Item #2 </button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="accordion-body">
Content for Accordion Item #2 goes here.
</div>
</div>
</div>
</div>Card
- A Card is a flexible and extensible content container that can be used to present various types of content in a consistent and visually appealing manner.
- Cards are a fundamental part of Bootstrap’s user interface components and can be used for displaying information, images, links, and other content.
- It provides choices for headers and footers, a diverse range of content, background colors that match the context, and robust display possibilities.
<div class="card" style="width:300px;">
<img src="rose.jfif" class="card-img-top" alt="Rose with water drops">
<div class="card-body">
<h5 class="card-title">Red Rose</h5>
<p class="card-text">This is beautiful red rose in rainy season.</p>
<a href="#" class="btn btn-primary">Go Anywhere</a>
</div>
</div>- Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
- Body
- The .card-body is a card’s fundamental component. Use it any time you require a padded area within a card.
<div class="card" style="width:500px;">
<div class="card-body">
This is H J Doshi Jamnagar inside Card body.
</div>
</div>- Titles, text, and links
- You can utilize card titles by appending .card-title to a <h*> element.
- The same method is used to add and position links by appending .card-link to an <a> tag.
- You can utilize subtitles by appending a .card-subtitle tag to a <h*> tag.
- The card title and subtitle are beautifully aligned if the .card-title and .card-subtitle items are placed in a .card-body item.
<div class="card" style="width:500px;">
<div class="card-body">
<h5 class="card-title">H J Doshi</h5>
<h6 class="card-subtitle mb-2 text-muted">BCA, BCom and PGDCA College</h6>
<p class="card-text">We are located in the middle of the city Jamnagar</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
</div>- Images
- .card-img-top adds a top-level picture to the card.
- Text can be added to the card using .card-text.
- The usual HTML elements can also be used to style text inside of .card-text.
<div class="card" style="width:300px;">
<img src="rose.jfif" class="card-img-top" alt="Red rose">
<div class="card-body">
<p class="card-text">This is beautiful red rose in rainy season.</p>
</div></div>- Modal
- A modal in Bootstrap is a dialogue box or pop-up window that is used to present extra content or forms over the currently shown page.
- It is frequently used to display login forms, contact forms, or notifications, among other things.
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Click here to check the Modal
</button>
<div class="modal fade" id='exampleModal'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This is Modal title</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>- Scrolling long content
- When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
- You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Click here to check the Modal
</button>
<div class="modal fade" id='exampleModal'>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This is Scrollable Modal title</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>This is some placeholder content to show the
scrolling behavior for modals. We use repeated line breaks
to demonstrate how content can exceed minimum inner height,
thereby showing inner scrolling. When content becomes longer
than the predefined max-height of modal, content will be cropped
and scrollable within the modal.
……
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>- Vertically centered
- You can add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>Bootstrap Utilities
Text Utilities
- You can change text alignment, transform, style, weight, line-height, decoration and color with following utilities:
- Text alignment
- Using text alignment classes, you can effortlessly adjust the alignment of text within components.
<p class="text-start">This is start aligned text on all viewport sizes.</p>
<p class="text-center">This is center aligned text on all viewport sizes.</p>
<p class="text-end">This is end aligned text on all viewport sizes.</p>- Text transform
- It allows you to change the capitalization of text within HTML elements.
- It is useful for altering the appearance of text without the need for custom CSS.
<p class="text-lowercase">THIS MUST BE LOWERCASE TEXT.</p>
<p class="text-uppercase">this must be uppercase text.</p>
<p class="text-capitalize">this must be capitalize text.</p>- Font size
- Bootstrap offers convenient utility classes for effortlessly managing text font sizes in your web application.
- These classes can be applied to HTML elements, allowing you to fine-tune text sizes according to your preferences.
- These classes control font size, with .fs-1 being the largest and .fs-6 the smallest.
<p class="lead">As we go from top to bottom, paragraph will be decreased in size</p>
<p class="fs-1">Hello Students..</p>
<p class="fs-2">Hello Students..</p>
<p class="fs-3">Hello Students..</p>
<p class="fs-4">Hello Students..</p>
<p class="fs-5">Hello Students..</p>
<p class="fs-6">Hello Students..</p>- Font weight and italics
- Easily modify text font-weight or font-style using these convenient utility classes. Font-style utilities are represented with abbreviations like .fst-*, while font-weight utilities are denoted by .fw-*.
<p class="fw-bold">This is Bold text.</p>
<p class="fw-bolder">This is Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">This is Normal weight text.</p>
<p class="fw-light">This is Light weight text.</p>
<p class="fw-lighter">This is Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">This is Italic text.</p>
<p class="fst-normal">This is Text with normal font style</p>- Line height
- You can change the line height with .lh-* utilities.
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. </p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. </p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. </p>- Reset Color
- It resets a text or link’s color with .text-reset, so that it can inherit the color from its parent element.
<p><a href="#" class='text-reset'>Click Here</a></p>- Text Decoration
- It decorates text in components with text decoration classes.
<p class="text-decoration-underline">This is underline example</p>
<p class="text-decoration-line-through">This is line through example</p>
<a href="#" class="text-decoration-none">This is link without underline</a>Color Utilities
- You can use the following utilities for color
- Colors
- It colorizes text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.
<p class="text-primary">This is primary text</p>
<p class="text-secondary">This is secondary text</p>
<p class="text-success">This is success text</p>
<p class="text-danger">This is danger text</p>
<p class="text-warning bg-dark">This is warning text</p>
<p class="text-info bg-dark">This is information text</p>
<p class="text-light bg-dark">This is light text with dark background</p>
<p class="text-dark">This is dark text</p>
<p class="text-body">This is body text</p>
<p class="text-muted">This is muted text</p>
<p class="text-white bg-dark">This is white text with dark background</p>
<p class="text-black-50">This is black(50%) text</p>
<p class="text-white-50 bg-dark">This is white(50%) with dark background</p>Background Utilities
- You can use gradients to provide decoration and background color to convey meaning.
- Background Color
- Set an element’s background to any contextual class, much like you would with contextual text color classes.
- Since background utilities don’t adjust color, you might want to utilize in some situations .color utilities for text-*.
<div class="p-3 mb-2 bg-primary text-white">Primary Color</div>
<div class="p-3 mb-2 bg-secondary text-white">Secondary Color</div>
<div class="p-3 mb-2 bg-success text-white">Success Color</div>
<div class="p-3 mb-2 bg-danger text-white">Danger Color</div>
<div class="p-3 mb-2 bg-warning text-dark">Warning Color</div>
<div class="p-3 mb-2 bg-info text-dark">Info Color</div>
<div class="p-3 mb-2 bg-light text-dark">Light Color</div>
<div class="p-3 mb-2 bg-dark text-white">Dark Color</div>
<div class="p-3 mb-2 bg-body text-dark">Body Color</div>
<div class="p-3 mb-2 bg-white text-dark">White Color</div>
<div class="p-3 mb-2 bg-transparent text-dark">Transparent Color</div>- In this example, p-3 class is used to apply padding to an element.
- p-3 stands for “padding 3,” and it adds a medium amount of padding to all sides (top, right, bottom, and left) of the element.
- This class ensures that there is some spacing around the content inside the <div>.
- mb-2 class is used to apply margin to the bottom of an element.
- mb-2 stands for “margin bottom 2,” and it adds a small margin to the bottom of the element.
- This creates space between this <div> and the element that comes after it, adding vertical separation.
- Background gradient
- When you include the .bg-gradient class, it introduces a linear gradient as the background image for the elements. This gradient commences with a slightly transparent white shade and gradually diminishes towards the lower part.
<div class="p-3 mb-2 bg-primary bg-gradient text-white">Primary Color</div>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">Secondary Color</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">Success Color</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">Danger Color</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">Warning Color</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">Info Color</div>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">Light Color</div>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">Dark Color</div>
<div class="p-3 mb-2 bg-body bg-gradient text-dark">Body Color</div>
<div class="p-3 mb-2 bg-white bg-gradient text-dark">White Color</div>
<div class="p-3 mb-2 bg-transparent bg-gradient text-dark">Transparent Color</div>Borders Utilities
- You can use border utilities to quickly style the border and border-radius of an element for images, buttons, or any other element.
- Border – Additive border with color
- Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
- Add border-primary or border-secondary etc to make it colored borders
<div class="border border-primary" style="width:100px;height:100px">All border</div><br>
<div class="border-top border-primary" style="width:100px;height:100px">Top border</div><br>
<div class="border-bottom border-primary" style="width:100px;height:100px">Bottom Border</div><br>
<div class="border-end border-primary" style="width:100px;height:100px">End border</div><br>
<div class="border-start border-primary" style="width:100px;height:100px">Start Border</div>- Subtractive Borders
- If you don’t want border at particular side, you just need to write the class accordingly.
<div class="border-0" style="margin:20px;width:100px;height:100px;background-color:cyan;">No border</div><br>
<div class="border-top-0" style="margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;">No Top border</div><br>
<div class="border-bottom-0" style="margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;">No Bottom border</div><br>
<div class="border-start-0" style="margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;">No start border</div><br>
<div class="border-end-0" style="margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;">No end border</div>Display Utilities
- With display tools, you can easily and quickly change the display value of components and more.
- It includes extras for managing display while printing as well as support for some of the more popular values.
- d-inline and d-block classes
- They are used to manage an element’s display property.
<!-- inline division -->
<div class="d-inline p-2 bg-primary text-white">This is inline division</div>
<div class="d-inline p-2 bg-warning text-dark">This is inline division</div>
<!-- block division -->
<div class="d-block p-2 bg-primary text-white">This is block division</div>
<div class="d-block p-2 bg-warning text-dark">This is block division</div>- The d-inline class makes an element behave as an inline element. It allows the element to flow with surrounding content horizontally.
- The d-block class makes an element behave as a block-level element. It takes up the full width available and starts on a new line.
- Hiding elements: To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.
- Display in Print: You can change the display value of elements when printing with our print display utility classes.
<!-- hiding div -->
<div class="d-none">This div remains always hide with this class</div>
<div class="d-md-none">This div hides on md(>=768) or wider screens</div>
<!-- display in print -->
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>Overflow Utilities
- You can use these shorthand utilities for quickly configuring how content overflows an element.
- With four default values and classes, you may modify the overflow property instantly. By default, these classes are not responsive.
<div class="overflow-auto" style="width:150px;height:100px;background-color:cyan;">This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.</div><br><br>
<div class="overflow-hidden" style="background-color:cyan;width:150px;height:100px;">This is an example of using .overflow-hidden on an element with set width and height dimensions.</div><br><br>
<div class="overflow-visible" style="width:150px;height:100px;background-color:cyan;">This is an example of using .overflow-visible on an element with set width and height dimensions</div><br><br>
<div class="overflow-scroll" style="width:150px;height:100px;background-color:cyan;">This is an example of using .overflow-scroll on an element with set width and height dimensions.<div>Position Utilities
- You can use these shorthand utilities for quickly configuring the position of an element.
- Position values
- Quick positioning classes are available, though they are not responsive.
<div class="position-static" style="border:1px solid;background-color:cyan;width:100px;height:100px;">This is static</div>
<div class="position-relative" style="border:1px solid;background-color:cyan;width:100px;height:100px;">This is relative</div>
<div class="position-absolute" style="margin:100px;border:1px solid;background-color:cyan;width:100px;height:100px;">This is absolute</div>
<div class="position-absolute" style="margin:200px;border:1px solid;background-color:cyan;width:100px;height:100px;">This is absolute</div>
<div class="position-fixed" style="border:1px solid;background-color:cyan;width:100px;height:100px;">This is fixed</div>
<p>…Scrollable content here…</p>Spacing Utilities
- To change an element’s appearance, Bootstrap offers a large selection of brief responsive margin, padding, and gap utility classes.
- Margin and Padding Notation
- The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.
- Where property is one of:
- m – for classes that set margin
- p – for classes that set padding
- Where sides is one of:
- t – for classes that set margin-top or padding-top
- b – for classes that set margin-bottom or padding-bottom
- s – (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
- e – (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
- x – for classes that set both *-left and *-right
- y – for classes that set both *-top and *-bottom
- blank – for classes that set a margin or padding on all 4 sides of the element
- Where size is one of:
- 0 – for classes that eliminate the margin or padding by setting it to 0
- 1 – (by default) for classes that set the margin or padding
- 2 – (by default) for classes that set the margin or padding
- 3 – (by default) for classes that set the margin or padding
- 4 – (by default) for classes that set the margin or padding
- 5 – (by default) for classes that set the margin or padding
- auto – for classes that set the margin to auto
- Horizontal Centering
- Furthermore, by setting the horizontal margins to auto, Bootstrap now contains a.mx-auto class that can be used to center fixed-width block level content (i.e., content with display: block and a width specified) horizontally.
<div class="mx-auto" style="width:200px;">
This is centered division
</div>- Gap
- Gap utilities can be used on the parent grid container when display: grid is used. This can save on having to provide margin utilities to individual grid elements (children of a display: grid container).
<div class="d-grid gap-4">
<div class="p-2 bg-warning border">This is HTML</div>
<div class="p-2 bg-warning border">This is CSS</div>
<div class="p-2 bg-warning border">This is Bootstrap</div>
</div>Vertical align Utilities
- You can easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- The utilities for vertical alignment allow you to change how items are aligned.
- Note that only inline, inline-block, inline-table, and table cell elements are impacted by vertical-align.
- As required, pick from the following options: .align-baseline, .align-top, .align-middle, .align-bottom.
<table style="height: 100px;" class="table table-bordered">
<tbody>
<tr>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-baseline">baseline</td>
</tbody>
</table>