Scribd
Upload
38 views

Bootstrap PDF

All about bootstrap 2025

Uploaded by

fakhar zman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Bootstrap PDF

All about bootstrap 2025

Uploaded by

fakhar zman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Bootstrap

Bootstrap is a popular front-end framework that provides a set of tools and templates for
creating responsive and mobile-first websites and web applications. It includes HTML and
CSS-based design templates for typography, forms, buttons, navigation, and other interface
components, as well as optional JavaScript extensions for interactive elements.

Example:

Here's a practical example to illustrate how Bootstrap works:

Let's say you want to create a simple webpage with a navigation bar, a heading, some text, and a
button. Using Bootstrap, you can achieve this quickly with minimal code.

1. Setting up Bootstrap:
o Include Bootstrap's CSS and JavaScript files in your HTML document. You can
do this by linking to Bootstrap's CDN (Content Delivery Network) or by
downloading Bootstrap and linking to the files locally.

Container
Definition and Usage:

The container class in Bootstrap is used to wrap the content of your website within a fixed-
width container. It ensures that the content inside it is centered and aligned properly on different
screen sizes, providing a consistent layout.

Types of Containers:

1. Container:
o The basic .container class provides a responsive fixed-width container.
o It adjusts its width depending on the viewport size (breakpoints), ensuring the
content inside is not excessively wide on large screens and remains properly
aligned on smaller screens.

HTML Code:

<div class="container">

This is bootstrap container

</div>
2 Fluid Container:

 Alternatively, Bootstrap offers a .container-fluid class for a full-width container that


spans the entire width of the viewport.
 This fluid container adjusts its width dynamically with the viewport size, making it
suitable for full-width layouts.

HTML Code:

<div class="container-fluid">

This is a Bootstrap fluid-container

</div>

Key Features:

 Responsive Design: Containers help in creating responsive layouts by adjusting their


width based on the screen size (viewport width).
 Centering Content: Content inside a .container or .container-fluid is
automatically centered both horizontally and vertically (depending on the content).
 Padding and Margin Control: Bootstrap containers provide padding to ensure proper
spacing between the content and the edges of the viewport.

When to Use Containers:

 Layout Structure: Use containers to structure your page content into distinct sections.
 Responsive Layouts: Containers ensure that your content is responsive and adapts well
to various screen sizes.
 Fixed vs. Fluid: Choose between .container for a fixed-width layout or .container-
fluid for a full-width layout based on your design needs.

Example:

Here's a practical example of using both .container and .container-fluid in a Bootstrap


layout:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Bootstrap Container Example</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>

<body>

<!-- Fixed-width container -->

<div class="container">

<h1>Fixed-width Container Example</h1>

<p>This container has a fixed width that adjusts at different breakpoints.</p>

</div>

<!-- Full-width (fluid) container -->

<div class="container-fluid bg-light">

<h1>Full-width (Fluid) Container Example</h1>

<p>This container spans the full width of the viewport.</p>

</div>

<!-- Bootstrap JavaScript (optional, for certain components) -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>
Explanation:

 The .container class is used for a fixed-width container that centers its content and
adjusts its width responsively.
 The .container-fluid class creates a full-width container that spans the entire viewport
width, suitable for fluid layouts.
 Each container wraps its content, providing padding and ensuring proper alignment
across different screen sizes.
 The table below illustrates how each container’s max-width compares to the
original .container and .container-fluid across each breakpoint.
 See them in action and compare them in our Grid example.

Extra small Small Medium Large X-Large XX-Large


<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-
sm 100% 540px 720px 960px 1140px 1320px
.container-
md 100% 100% 720px 960px 1140px 1320px

.container-lg 100% 100% 100% 960px 1140px 1320px

.container-xl 100% 100% 100% 100% 1140px 1320px


.container-
xxl 100% 100% 100% 100% 100% 1320px
.container-
fluid 100% 100% 100% 100% 100% 100%

Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified
breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For
example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will
scale up with md, lg, xl, and xxl.

<div class="container-sm">100% wide until small breakpoint</div>


<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Buttons in Bootstrap
In Bootstrap, buttons are an essential part of creating interactive user interfaces. Here's a
comprehensive overview of Bootstrap buttons and their attributes:

(1) Bootstrap Button Classes


Bootstrap provides several classes for styling buttons:

 Primary Button: btn btn-primary


 Secondary Button: btn btn-secondary
 Success Button: btn btn-success
 Danger Button: btn btn-danger
 Warning Button: btn btn-warning
 Info Button: btn btn-info
 Light Button: btn btn-light
 Dark Button: btn btn-dark
 Link/Button: btn btn-link (for hyperlinks that look like buttons)

HTML code:

<!-- Primary Button -->

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

<!-- Secondary Button -->

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

<!-- Success Button -->

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


<!-- Danger Button -->

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

<!-- Warning Button -->

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

<!-- Info Button -->

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

<!-- Light Button -->

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

<!-- Dark Button -->

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

(2) Button Sizes


Buttons can also have different sizes:

 Large Button: btn-lg


 Small Button: btn-sm
 Extra Small Button: btn-xs (deprecated in Bootstrap 4)

HTML Code:

<!-- Large Button -->

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


<!-- Default Size Button -->

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

<!-- Small Button -->

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

(3) Outline Buttons


Outline buttons provide a transparent background and colored border, suitable for more subtle
actions. In Bootstrap 4 and later, buttons can also be styled as outline buttons:

 Outline Primary: btn btn-outline-primary


 Outline Secondary: btn btn-outline-secondary
 And so on for other colors (btn-outline-success, btn-outline-danger, etc.)

HTML Code

<!-- Outline Primary Button -->

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

<!-- Outline Secondary Button -->

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

(4) Button States


Buttons can have different states:

 Active State: active


 Disabled State: disabled

Additional Button Options

 Block Buttons: btn-block makes the button full-width.


 Toggle Buttons: Use data-toggle="button" for toggleable buttons.
 Button Groups: Use btn-group and btn-group-toggle for groups of buttons.

<!-- Active State Button -->


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

<!-- Disabled State Button -->

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

Buttons can be grouped together using Bootstrap's button group components.

<div class="btn-group" role="group" aria-label="Basic example">

<button type="button" class="btn btn-primary">Left</button>

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

Bootstrap supports toggleable buttons for interactive UI elements.

<div class="btn-group-toggle" data-toggle="buttons">

<label class="btn btn-primary active">

<input type="radio" name="options" id="option1" autocomplete="off" checked> Active

</label>

<label class="btn btn-primary">

<input type="radio" name="options" id="option2" autocomplete="off"> Radio

</label>

<label class="btn btn-primary">

<input type="radio" name="options" id="option3" autocomplete="off"> Radio

</label>

</div>
Badges in Bootstrap
In Bootstrap, badges are small components typically used to indicate numeric values (like counts
or notifications) in an aesthetically pleasing way. Here's a clear breakdown of how to use badges
along with an example:

Basic Badge
A basic badge is created using the <span> element with the class .badge. You can customize the
appearance of badges using additional classes.

Example:
<span class="badge badge-primary">New</span>

In this example:

 badge class creates the basic badge style.


 badge-primary class gives the badge a blue background, indicating it's a primary status.

One more example


Hare is a line by Line Explanation of above code

1. `<button type="button" class="btn btn-primary">`

- This line creates a `<button>` element.

- `type="button"` specifies that this button does not submit a form, it simply performs an
action when clicked (standard button behavior).

- `class="btn btn-primary"` assigns two classes to the button:

- `btn`: This is a general class used in Bootstrap to define a button.

- `btn-primary`: This is a Bootstrap class that gives the button a primary color, typically a
shade of blue, indicating that it represents the main action or primary action in a set of
buttons.

2. `Profile <span class="badge badge-light">9</span>`

- Inside the `<button>` element, there is text "Profile" followed by a `<span>` element.

- The text "Profile" is plain text displayed on the button.

- `<span class="badge badge-light">9</span>` is another `<span>` element that contains:

- `class="badge badge-light"`: These are Bootstrap classes used to create a badge-like


component.

- `badge`: Defines the element as a badge.


- `badge-light`: Sets the background color of the badge to a light shade.

- The number `9` inside the `<span>` is typically used to indicate a count or some form of
status. In this case, it might represent unread messages or notifications.

3. `<span class="sr-only">unread messages</span>`

- This `<span>` element has a class `sr-only`.

- `class="sr-only"`: This is a Bootstrap utility class used for accessibility purposes.

- It visually hides the content within it from users but makes it available to screen readers.

- It's often used to provide additional context or information for accessibility without
cluttering the visual interface.

- In this case, it contains the text "unread messages", which provides a description for the
badge count "9" to users who rely on screen readers.

In summary, this code snippet creates a styled Bootstrap button labeled "Profile" with a
primary blue color. It includes a badge indicating the number "9" (potentially representing
unread messages or notifications) and provides accessibility support with hidden text for
screen readers.
Pill badges are a type of badge in Bootstrap that have more rounded corners, giving them a pill-
like shape. They are created by adding the .rounded-pill class to the .badge class.

Positioning
Pill badges can be positioned in the corner of a link or button using positioning utility classes.

Badges in Buttons
You can place badges inside buttons to indicate additional information, such as counts or
statuses.

Example:

<button type="button" class="btn btn-primary">

Notifications <span class="badge badge-light">4</span>

</button>

Utility Classes
Bootstrap also provides utility classes to adjust badges easily, such as .badge-lg for larger
badges and .badge-sm for smaller badges.

Example:

<span class="badge badge-primary badge-lg">Large</span>

<span class="badge badge-primary">Normal</span>

<span class="badge badge-primary badge-sm">Small</span>

Conclusion
Bootstrap badges are versatile components that can be used to highlight and display various
types of information in a visually appealing manner. By utilizing different classes and styles, you
can integrate badges seamlessly into your web projects to enhance user experience and provide
clear notifications or indicators.
Alerts in Bootstrap
Provide contextual feedback messages for typical user actions with the handful of available and
flexible alert messages.

Alert Types in Bootstrap


Bootstrap provides several types of alert components that you can use to display contextual
feedback messages to users. The main alert types are:

Success Alerts
<div class="alert alert-success" role="alert">

<strong>Success!</strong> This is a success alert—check it out!

</div>

Success alerts are used to indicate a successful or positive action.

Info Alerts
<div class="alert alert-info" role="alert">

<strong>Info!</strong> This is an info alert—check it out!

</div>

Info alerts are used to indicate a neutral informative change or action.

Danger Alerts
<div class="alert alert-danger" role="alert">

<strong>Danger!</strong> This is a danger alert—check it out!

</div>

Danger alerts are used to indicate a dangerous or potentially negative action.

In addition to these main types, Bootstrap also provides the following alert variations:

.alert-primary: A primary-colored alert


.alert-secondary: A secondary-colored alert

.alert-light: A light-colored alert

.alert-dark: A dark-colored alert

You can apply these classes to the .alert base class to create the desired alert style.

Alert Structure
The basic structure of a Bootstrap alert is:

<div class="alert alert-[type]" role="alert">

<strong>[Alert Heading]</strong> [Alert Message]

</div>

i. The outer <div> element has the .alert class to apply the base alert styles.
ii. The alert-[type] class (e.g. alert-success) is used to apply the specific alert color.
iii. The role="alert" attribute is used for accessibility, indicating that this is an alert message.
iv. The <strong> element is used to make the alert heading bold.
v. The alert message text follows the heading.

Dismissible Alerts
You can make an alert dismissible by adding the .alert-dismissible class to the outer <div> and
including a close button:

<div class="alert alert-warning alert-dismissible fade show" role="alert">

<strong>Warning!</strong> This is a warning alert.

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

</div>

 The .alert-dismissible class adds the styles for the close button.
 The fade show classes add a fade-in animation when the alert is shown.
 The data-bs-dismiss="alert" attribute on the button tells Bootstrap to dismiss the alert
when clicked.
 The aria-label="Close" attribute is for accessibility, describing the purpose of the button.

Colored Links in Alerts


You can add colored links within an alert by using the .alert-link class:

<div class="alert alert-danger" role="alert">


This is a danger alert with a <a href="#" class="alert-link">example link</a>.

</div>
The .alert-link class will style the link to match the alert's color.

Alerts with Icons


You can also include icons within your alerts using Bootstrap's icon classes and flexbox utilities:

<div class="alert alert-primary d-flex align-items-center" role="alert">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"


class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-
label="Warning:">

<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98


1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35
3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-
2z"/>

</svg>

<div>

This is a primary alert with an icon.

</div>

</div>

 The d-flex align-items-center classes center the content vertically.


 The SVG icon is wrapped in a <svg> element with Bootstrap icon classes.
 The flex-shrink-0 class ensures the icon doesn't shrink.
 The me-2 class adds some right margin to the icon.
 The role="img" and aria-label="Warning:" attributes provide accessibility information
about the icon.
 In summary, Bootstrap provides a variety of alert components that you can use to display
contextual feedback messages to users. You can customize the alert type, make them
dismissible, add colored links, and include icons as needed.
Button Group Component in Bootstrap
Button Group
The button group component in Bootstrap allows you to group a series of buttons together on a
single line or stack them in a vertical column. This is useful for creating toolbar-like button
layouts.

Basic Example To create a basic button group, wrap a series of .btn elements in a .btn-
group container:

<div class="btn-group" role="group" aria-label="Basic example">

<button type="button" class="btn btn-primary">Left</button>

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

The role="group" and aria-label attributes are important for accessibility, as they inform assistive
technologies that these buttons are part of a group.

Mixed Styles
You can use different button styles within the same button group:

<div class="btn-group" role="group" aria-label="Basic mixed styles example">

<button type="button" class="btn btn-danger">Left</button>

<button type="button" class="btn btn-warning">Middle</button>

<button type="button" class="btn btn-success">Right</button>

</div>

Outlined Styles
You can also use outlined button styles within a button group:

<div class="btn-group" role="group" aria-label="Basic outlined example">

<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>

Checkbox and Radio Buttons


You can create button groups with checkboxes or radio buttons by adding the data-
toggle="buttons" attribute to the .btn-group container and using .btn and .active classes on
the <label> elements:

<div class="btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox" checked autocomplete="off"> Checked

</label>

</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="radio" name="options" id="option1" autocomplete="off" checked> Active

</label>

<label class="btn btn-secondary">

<input type="radio" name="options" id="option2" autocomplete="off"> Radio

</label>

<label class="btn btn-secondary">

<input type="radio" name="options" id="option3" autocomplete="off"> Radio

</label>

</div>
Sizing
Instead of applying button sizing classes to every button in a group, you can add .btn-group-
lg, .btn-group-sm, or .btn-group-xs to the .btn-group container to size all buttons in the group:

My Example Coding

<div class="btn-group btn-group-lg" role="group" aria-label="Large button 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>

Vertical Variation
To stack the buttons vertically instead of horizontally, use the .btn-group-vertical class:

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">

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

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

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

</div>
Button Toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility
classes as needed to space out groups, buttons, and more.

For more complex layouts, you can combine multiple button groups into a button toolbar using
the .btn-toolbar class.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">

<div class="btn-group mr-2" role="group" aria-label="First group">

<button type="button" class="btn btn-secondary">1</button>

<button type="button" class="btn btn-secondary">2</button>

<button type="button" class="btn btn-secondary">3</button>

<button type="button" class="btn btn-secondary">4</button>

</div>

<div class="btn-group mr-2" role="group" aria-label="Second group">

<button type="button" class="btn btn-secondary">5</button>

<button type="button" class="btn btn-secondary">6</button>


<button type="button" class="btn btn-secondary">7</button>

</div>

<div class="btn-group" role="group" aria-label="Third group">

<button type="button" class="btn btn-secondary">8</button>

</div>

</div>

The button group component in Bootstrap provides a flexible way to group related buttons
together and create complex button-based layouts. By using the appropriate classes and
attributes, you can create a variety of button group styles and behaviors to suit your needs.

Nav-bar in Bootstrap
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the
navbar. Includes support for branding, navigation, and more, including support for our collapse
plugin.
Navbar using Anchor Tag
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-


target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<div class="navbar-nav">

<a class="nav-item nav-link active" href="#">Home <span class="sr-


only">(current)</span></a>

<a class="nav-item nav-link" href="#">Features</a>

<a class="nav-item nav-link" href="#">Pricing</a>

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

</div>

</div>

</nav>

Output Hare

Hare is a line by line detail of above code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

1) <nav>: This is the starting tag for the navigation element.


2) class="navbar navbar-expand-lg navbar-light bg-light": This sets the CSS classes for
the navigation element:
 navbar: This is the base class for Bootstrap navigation elements.
 navbar-expand-lg: This class makes the navigation bar expand to occupy the full width
of the screen on large screens (lg) and above.
 navbar-light: This class sets the background color of the navigation bar to a light color.
 bg-light: This class sets the background color of the navigation bar to a light color.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-


target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-
expanded="false" aria-label="Toggle navigation">

Explanation Hare
<div class="collapse navbar-collapse"
id="navbarNavAltMarkup">

<div class="navbar-nav">

<a class="nav-item nav-link active"


href="#">Home <span class="sr-
only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>

<a class="nav-item nav-link" href="#">Pricing</a>

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

For dropdown list

<ul class="dropdown-menu" aria-labelledby="navbarDropdownPricingMenu">

<li><a class="dropdown-item" href="#">Basic</a></li>

<li><a class="dropdown-item" href="#">Standard</a></li>

<li><a class="dropdown-item" href="#">Pro</a></li>

</ul>
Cards Component in Bootstrap
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and
options.

<div class="card" style="width: 18rem;">

<img class="card-img-top" src="..." alt="Card image cap">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

</div>
Titles, text, and links:
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and
placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-
subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

<div class="card" style="width: 18rem;">

<div class="card-body">
<h5 class="card-title">Card title</h5>

<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>

<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>

<a href="#" class="card-link">Card link</a>

<a href="#" class="card-link">Another link</a>

</div>

</div>

Grid System Bootstrap


Bootstrap’s grid system is a powerful and flexible tool for creating responsive layouts. It is one
of the core components of the Bootstrap framework and allows developers to design flexible and
responsive web pages.

1. Overview of the Grid System


Definition: The grid system in Bootstrap is a series of containers, rows, and columns used to
layout and align content. It’s based on a 12-column layout that helps create flexible and
responsive designs.

Code:

<div class="container">
<h2>Grid System Practise</h2>
<div class="row">
<div class="col-4 bg-danger">ONE-1</div>
<div class="col-4 bg-primary">TWO-2</div>
<div class="col-4 bg-success">THREE-3</div>
</div>
</div>
Grid options for Responsive
Bootstrap's grid system has six default breakpoint tiers that adapt the layout across different
screen sizes:

(1) xs: Extra small (mobile)


(2) sm: Small (tablet)
(3) md: Medium (desktop)
(4) lg: Large (large desktop)
(5) xl: Extra large (larger screens)
(6) xxl: Extra extra large (extra large screens)

Grid system Vertical-Alignment


Form Controls in Bootstrap
Form controls in Bootstrap are pre-styled HTML elements used to build forms. They include
inputs for text, numbers, passwords, and more, all styled to be consistent and accessible.
Bootstrap provides various classes and utilities to enhance the functionality and appearance of
these controls.

You might also like