Bootstrap is one of the world's most famous free CSS frameworks.

The version that we have currently of Bootstrap is v5.3 and is the newest version of Bootstrap, it is famous for creating responsive, mobile-first websites. During this post we will discuss most import points about Bootstrap and how to use it and other points that are necessary to know about this amazing CSS Framework as a web app developer.

Bootstrap v5.3 is completely free you can download it and use it!

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes, it reduced the development cost to a lot and saves time of a developer.

Create a new index.html file in your project root. Include the <meta name="viewport"> tag as well for proper responsive behavior in mobile devices.

<!doctype html>

<head>

<title>Bootstrap demo</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>. Learn more about our CDN links.

<!doctype html>

<head>

<title>Bootstrap demo</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Hello, world! Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout, adding dozens of components, and utilizing our official examples.

CDN links

As reference, here are our primary CDN links.

Description URL

CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Bootstrap v5.3 Containers

Bootstrap requires a containing element to wrap site contents.

Containers are used to pad the content inside of them, and in bootstrap there are two container classes available:

The .container-fluid class provides a full width container, spanning the entire width of the viewport of a browser.

The .container class provides a responsive fixed width container

Fixed Container Examples:

Use the .container class to create a responsive, fixed-width con

<h1>First Bootstrap Page</h1>

</div>

Fluid Container Examples:

Use the .container-fluid class to create a responsive, fixed-width con

<h1>First Bootstrap Page</h1>

</div>

Responsive Containers

We can use the .container-sm | md | lg | xl classes to display when the container must be responsive.

The max-width of the container will change on different screen sizes/viewports according to these classes assigned:

Classes :

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

Example :

<div class="container-sm">example1</div>

<div class="container-md">example1</div>

<div class="container-lg">example1</div>

<div class="container-xl">example1</div>

<div class="container-xxl">example1</div>

Bootstrap Grids:

Bootstrap v5.3 Grid System

Bootstrap's grid system is developed using flexbox and allows up to 12 columns across the page.

If you do not need to use all 12 columns individually, you can group the columns together to create wider columns (single/multiple):

|Cl-1|Cl-2|Cl-3|Cl-4|Cl-5|Cl-6|Cl-7|Cl-5|Cl-6|Cl-7|Cl-8|Cl-9|Cl-10|Cl-11|Cl-12|

| Cl-4 | Cl-4 | Cl-4 | Cl-4 |

| Cl-6 | Cl-6 |

| Cl-12 |

The grid system is used to create responsive web pages, and the columns will re-arrange automatically depending on our screen size.

Make sure that the sum adds up to 12 Column size or less.

Grid Classes in Bootstrap :

The Bootstrap v5.3 grid system has 6 classes which are given as:

.col - ( width less than 576px -- extra small devices - screen)

.col-sm - (width equal to or greater than 576px -- small devices - screen )

.col-md - ( width equal to or greater than 768px -- medium devices - screen)

.col-lg - (width equal to or greater than 992px -- large devices - screen )

.col-xl - (width equal to or greater than 1200px -- xlarge devices - screen )

.col-xxl - (width equal to or greater than 1400px -- xxlarge devices - screen )

More dynamic and adaptable layouts can be made by combining the aforementioned classes.

You only need to mention sm if you wish to set the same widths for sm and md because each class scales up.

Fundamental Bootstrap 5 Grid Structure
The fundamental layout of a Bootstrap 5 grid is as follows:

</div>

</div>

</div>

Create a row (<div class="row">) as the first example. Next, include as many columns as you want (tag the relevant ones).classes (col-*-*). While the second star denotes a number that should add up to 12 for each row, the first star (*) indicates the responsiveness, which can be sm, md, lg, xl, or xxl.

In the second example, two "col" elements equal 50% width to each col, whereas three cols equal 33.33% width to each col. This is achieved by letting bootstrap manage the layout rather than putting a number to each col. 25% width is equal to four cols, etc. To make the columns responsive, you can also use.col-sm|md|lg|xl|xxl.

Creating four equal-width columns across all devices and screen widths is demonstrated in the example below:

</div>

Columns that are Responsive:

Creating four equal-width columns that scale to extra big desktops from tablets is demonstrated in the example that follows. The columns will automatically stack on top of one another on screens less than 576 pixels on mobile devices or screens:

Example

</div>

Two Columns with Inequalities in Response(Responsive)

</div>

Bootstrap v5.3 has styles HTML headings (<h1> to <h6>) with a bolder font-weight and with a font-size responsive.

Example from <h1> to <h6> :

<p class="h6">h6 Bootstrap heading</p>

<p class="h5">h5 Bootstrap heading</p>

<p class="h4">h4 Bootstrap heading</p>

<p class="h3">h3 Bootstrap heading</p>

<p class="h2">h2 Bootstrap heading</p>

<p class="h1">h1 Bootstrap heading</p>

Output:

h6 Bootstrap heading

h5 Bootstrap heading

h4 Bootstrap heading

h3 Bootstrap heading

h2 Bootstrap heading

h1 Bootstrap heading

Bootstrap Text Colors :

Bootstrap v5.3 has classes that can be used to provide "colors".

The classes for text colors are: .text-success, .text-secondary, .text-muted, .text-primary, .text-info, .text-warning, .text-dark, .text-danger, .text-body and .text-light:

<p class="text-success">This is success text.</p>

<p class="text-primary">This text is important.</p>

<p class="text-muted">This text is muted.</p>

<p class="text-info">This text represents some information.</p>

<p class="text-secondary">Secondary text.</p>

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-light">This text is light grey (on white background).</p>

<p class="text-white">This text is white (on white background).</p>

<p class="text-body">Default body color (often black).</p>

</div>

Color Example:

This is success text.

This is information text.

This is muted text.

This is important text.\

This is dark text.

This is Secondary text.

This is warning text.

This is danger text.

Body text.

Background Colors :

The classes for background colors are: .bg-warning, .bg-danger, .bg-secondary, .bg-primary, .bg-success, .bg-info, .bg-dark and .bg-light.

</div>

To get the correct text colour for each backdrop, you must supply a proper .text-color class, or at the very least, the.bg-color classes mentioned above do not work well with text.

Nevertheless, Bootstrap will automatically handle the proper text colour for each backdrop colour if you use the.text-bg-color classes:

<h2>Background Color with Contrasting Text Color</h2>

<p class="text-bg-primary">This is important text .</p>

<p class="text-bg-success">This is success text.</p>

<p class="text-bg-info">This text represents some information.</p>

<p class="text-bg-warning">This text represents a warning.</p>

<p class="text-bg-danger">This text represents danger.</p>

<p class="text-bg-secondary">Secondary background color.</p>

<p class="text-bg-dark">Dark grey background color.</p>

<p class="text-bg-light">Light grey background color.</p>

</div>

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Bootstrap Table :
A simple Bootstrap v5.3 table features horizontal dividers and minimal padding.

Basic table styling is added via the .table class:

<h2>Basic Table</h2>

<p>The .table class adds basic styling to a table as in bootstrap:</p>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>First-Name</td>

<td>first@example.com</td>

</tr>

<tr>

<td>Second-Name</td>

<td>Second-Last-Name</td>

<td>second@example.com</td>

</tr>

<tr>

<td>Third-Name</td>

<td>Third-Last-Name</td>

<td>third@example.com</td>

</tr>

</tbody>

</table>

</div>

Striped Rows in Bootstrap:

The .table-striped class adds a style like zebra-stripes to a table in bootstrap:

<h2>Striped Rows</h2>

<p>The .table-striped class adds zebra-stripes to a table:</p>

<h2>Basic Table</h2>

<p>The .table class adds basic styling to a table as in bootstrap:</p>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>First-Name</td>

<td>first@example.com</td>

</tr>

<tr>

<td>Second-Name</td>

<td>Second-Last-Name</td>

<td>second@example.com</td>

</tr>

<tr>

<td>Third-Name</td>

<td>Third-Last-Name</td>

<td>third@example.com</td>

</tr>

</tbody>

</table>

</div>

Bootstrap Responsive Table:

<h2>Responsive Table</h2>

<p>The .table-responsive class adds a scrollbar to the table when needed:</p>

<thead>

<tr>

<th>First-name</th>

<th>Country</th>

<th>Gender</th>

</tr>

</thead>

<tbody>

<tr>

<td>Delhi</td>

<td>India</td>

<td>Female</td>

</tr>

</tbody>

</table>

</div>

Bootstrap 5 Images

Images with Rounded Corners

An image can have rounded corners thanks to the .rounded class:

Example

Circle

The .rounded-circle class shapes the image to a circle:

An image can have circular shape thanks to the .rounded-circle class:

Example

Responsive Images

Responsive images instantly adjust to the size of the screen.

To create responsive images, give the tag a .img-fluid class. After that, the picture will scale well to the parent element.

The picture is given max-width: 100%; and height: auto; by the .img-fluid class:

Example

Bootstrap 5 Alerts

Alerts

Creating preconfigured alert messages is made simple with Bootstrap v5.3:

Success! This is success alert message!

Warning: This is warning alert message!

Info! This is information alert message!

Danger! This is danger alert message!

Primary! This is primary alert message!.

Secondary! This is secondary alert message!.

Dark! This is Dark alert message!.

Light! This is Light alert message!.

The contextual classes.alert-success,.alert-secondary,.alert-light, .alert-info,.alert-warning,.alert-danger,.alert-primary, or.alert-dark come after the.alert class, which is used to construct alerts:

For instance

<h2>Alerts</h2>

<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>

<strong>Success! </strong>This is success alert message!

</div>

<strong>Warning! </strong>This is success alert message!

</div>

<strong>Info! </strong>This is info alert message!

</div>

<strong>Danger! </strong>This is danger alert message!

</div>

<strong>Primary! </strong>This is primary alert message!

</div>

<strong>Secondary! </strong>This is secondary alert message!

</div>

<strong>Dark! </strong>This is Dark alert message!

</div>

<strong>Light! </strong>This is Light alert message!

</div>

Success! This is success alert message!

Warning: This is warning alert message!

Info! This is information alert message!

Danger! This is danger alert message!

Primary! This is primary alert message!.

Secondary! This is secondary alert message!

Dark! This is Dark alert message!.

Light! This is Light alert message!.

Bootstrap Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message:

<h2>Animated Alerts</h2>

<p>The .fade and .show classes adds a fading effect when closing the alert message.</p>

<strong>Success!</strong>This is success alert Message with close at the end.

</div>

<strong>Warning!</strong>This is warning alert Message with close at the end. need attention.

</div>

<strong>Info!</strong>This is info alert Message with close at the end.

</div>

<strong>Danger!</strong>This is danger alert Message with close at the end.

</div>

<strong>Primary!</strong>This is primary alert Message with close at the end.

</div>

<strong>Secondary!</strong>This is secondary alert Message with close at the end.

</div>

<strong>Dark!</strong>This is dark alert Message with close at the end.

</div>

<strong>Light!</strong>This is light alert Message with close at the end.

</div>

Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message.

Success! This is success alert Message with close at the end. X

Warning: This is warning alert Message with close at the end. X

Info! This is information alert Message with close at the end. X

Danger! This is danger alert Message with close at the end. X

Primary! This is primary alert Message with close at the end. X

Secondary! This is secondary alert Message with close at the end. X

Dark! This is Dark alert Message with close at the end.. X

Light! This is Light alert Message with close at the end. X

Bootstrap v5.3 Buttons

Button Styles

In Bootstrap v5.3, it provides different styles of buttons for users :

Let us take an Example:

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary Button</button>

<button type="button" class="btn btn-secondary">Secondary Button</button>

<button type="button" class="btn btn-warning">Warning Button</button>

<button type="button" class="btn btn-danger">Danger Button</button>

<button type="button" class="btn btn-dark">Dark Button</button>

<button type="button" class="btn btn-success">Success Button</button>

<button type="button" class="btn btn-info">Info Button</button>

<button type="button" class="btn btn-light">Light Button</button>

<button type="button" class="btn btn-link">Link Button</button>

The button classes can be used on <a>, <button>, or <input> elements:

Basic | Primary Button | Secondary Button | Warning Button |

| Light Button | Link Button |

Badges in Bootstrap v5.3

Use any of the classes (.bg-*) to change the color of badges:

Example

<span class="badge bg-primary">Primary</span>

<span class="badge bg-secondary">Secondary</span>

<span class="badge bg-warning">Warning</span>

<span class="badge bg-danger">Danger</span>

<span class="badge bg-success">Success</span>

<span class="badge bg-light">Light</span>

Progress Bar in Bootstrap:

One way to display a user's progress in a process is via a progress bar.

Add a .progress class to a container element and a .progress-bar class to a child element to generate a default progress bar. To adjust the progress bar's width, use the CSS width property:

Example

</div>

</div>

Bootstrap Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Example :

Bootstrap 5 Spinners

Spinners

Use the .spinner-border class, to create a spinner/loader:

Example

The Basic Pagination of Bootstrap 5

You might want to add pagination to each page of your website if it has several pages.

Previous Page 1, 2, and 3 Next Page
Add the .pagination class to a element to create a simple pagination. Next, give each link inside

a .page-link class and each
element a .page-item:

<li class="page-item"><a class="page-link" href="#">Previous Page</a></li>

</ul>

Previous Page 1, 2, 3, 4 and 5 Next Page

Bootstrap 5 Cards

Cards
In Bootstrap 5, a card is a box with a border and padding around its contents. It offers choices for content, headers, footers, colours, and more.

Basic Card Example:

The .card class is used to construct a simple card, while the .card-body class is used for the content inside the card:

Example

<div class="card-body">Simple card</div>

</div>

The card is given a heading by the.card-header class and a footer by the.card-footer class:

Example

<div class="card-header">Header of Card</div>

<div class="card-body">Content of Card</div>

<div class="card-footer">Footer of Card</div>

</div>

Simple Dropdown
The user can select one value from a specified list using a dropdown menu, which is a toggleable menu:

Example

Dropdown button

</button>

</ul>

</div>

Dropdown v

An explanation of an example

A dropdown menu is indicated by the .dropdown class.

Use a button or link with the data-bs-toggle="dropdown" property and a class of .dropdown-toggle to open the dropdown menu.

To actually create the dropdown menu, add the .dropdown-menu class to a container element, such as <div> or <ul>. Next, give each button or link inside the dropdown menu the .dropdown-item class.

Bootstrap v5.3 Navs

Nav Menus Example :

Link1 Link2 Link3 Disabled

Add the .nav class to a <ul> element, then.nav-item for every <li>, and then the .nav-link class to their links to create a basic horizontal menu:

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

Link Link Link Disabled

Bootstrap 5 Carousel

Carousel / Slideshow

The Carousel is a slideshow for making content to repeat through elements:

How we Create a Carousel in Bootstrap:

The following example shows how to create:

</div>

</div>

</div>

</div>

</div>

</button>

</button>

</div>

Bootstrap 5 Modal

Modals

A dialogue box or popup window that appears on top of the current page is the modal component:

How a Modal Is Made
Here's an example of how to make a simple modal:

Example of Modal :

new modal

</button>

<h4 class="modal-title">Modal Heading Here</h4>

</div>

Modal body Here

</div>

<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

</div>

Bootstrap v5.3 Tooltip

Tooltips
When the user drags the mouse pointer over an element, a little pop-up box known as the Tooltip component appears:

How a Tooltip Is Made
Add the data-bs-toggle="tooltip" attribute to an element to generate a tooltip.

The text that should appear inside the tooltip can be specified using the title attribute:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over this button to see tooltip!</button>

Remember : For tooltips to function, JavaScript must be initialised.

All of the tooltips in the document will be enabled by the following code:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

return new bootstrap.Tooltip(tooltipTriggerEl)

})

</script>

______________________________

Conclude Comment:

This is a brief knowledge about Bootstrap a CSS Framework that we thought to bring in your view. Please let us know if you want to learn more about Bootstrap or any other topics related to Programming or Web Application Development for future to be posted on my blog, it will be an honor for me and my whole team.

Thank you for remaining here and reading the content, we hope you love the content and is very helpful for you, please leave a comment.

Search This Blog

Innovative Code

Bootstrap a CSS framework

Dropdown v

Bootstrap v5.3 Tooltip

Comments

Post a Comment

Popular posts from this blog

How to build a Web Application using PHP and other Tools of Web App Development

Variable in Programming