Skip to content
Related Articles

Related Articles

Bootstrap Cheatsheet – A Basic Guide to Bootstrap

Improve Article
Save Article
  • Last Updated : 30 Sep, 2022
Improve Article
Save Article

What is Bootstrap?

Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.

Bootstrap Cheat Sheet

What is Bootstrap Cheat Sheet?

Bootstrap CheatSheet is a collection of all the classes, variables, and mixins you are ever going to need to create an interactive website or application.

Table of Content

 

Forms

A form is a common tool of HTML used to collect data from users using fields like text area, select, input area, etc. Bootstrap is used to provide styles, layout options, and custom components for creating and styling a variety of forms.

ElementDescription
Form controlform-control is the default class for styling <input>, <select> and <textarea> elements. The size of form-control can be adjusted by using classes .form-control-lg and .form-control-sm 
SelectBootstrap Select is a form control that shows a collapsable list of different values that can be selected. This can be used for displaying forms or menus to the user. 
Checks and radioThe classes used for radio buttons and checkboxes are .form-check. 
RangeThe range input type can be defined with class .form-control-range.
LayoutBootstrap provides two major layout options for creating responsive websites. Fluid layout and fixed layout to cover full-screen width and standard screen(940px) respectively.
ValidationHTML form validation is applied  to <input>, <select>, and <textarea> elements via CSS’s two pseudo-classes, :invalid and :valid.
DatalistBootstrap 5 provides options to style the data list using form-control classes. It lets us enter options and if there’s a match, we can select it.
ReadonlyReadonly adds read-only text.
Form groupWhen added as a wrapper around each input type or form control, it creates a stacked form with proper margins.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">Stacked form</h2>
    <div class="container">
        <form action="#">
            <div class="form-group">
                <label for="fname">First Name:</label>
                <input type="text" class="form-control" id="fname" 
                placeholder="Enter First Name" name="fname">
            </div>
            <div class="form-group">
                <label for="lname">Last Name:</label>
                <input type="text" class="form-control" id="lname" 
                placeholder="Enter Last Name" name="lname">
            </div>
            <div class="form-group">
                <label for="email">Email Id:</label>
                <input type="email" class="form-control" id="email" 
                placeholder="Enter Email Id" name="email">
            </div>
            <div class="form-group">
                <label for="contact">Contact No:</label>
                <input type="text" class="form-control" id="contact" 
                placeholder="Enter Contact Number" name="contact">
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="remember">
                    Remember me
                </label>
            </div>
            <button type="submit" class="btn bg-success">
                Submit
            </button>
        </form>
    </div>
</body>
  
</html>


 

Input groups

Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. The following classes are the base classes that are used to add the groups to either side of the input boxes. 

classDescription
.input-group-prependIt is used to add groups to the front of the input.
.input-group-appendIt is used to add groups behind the input.
.input-group-textIt is used to style the text that is displayed inside the group.
.input-group-smIt is used to make input groups smaller.
.input-group-lgIt is used to make input groups larger.
.input-groupIt is used to keep the size of the input group default.

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href=
    <title>Input Groups in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <h5>Sizing</h5>
  
        <div class="input-group input-group-sm mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <span class="input-group-text" id="small">Small</span>
            </div>
  
            <input type="text" class="form-control">
        </div>
  
        <div class="input-group mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <span class="input-group-text" id="medium">Default</span>
            </div>
  
  
            <input type="text" class="form-control">
        </div>
  
        <div class="input-group input-group-lg">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <span class="input-group-text" id="large">Large</span>
            </div>
  
            <input type="text" class="form-control">
        </div>
        <br>
        <h5>Prepend Group Example</h5>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="username">@</span>
            </div>
  
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br>
        <h5>Append Group Example</h5>
        <div class="input-group">
  
            <input type="text" class="form-control" placeholder="Email">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-append">
                <span class="input-group-text" id="email">@example.com</span>
            </div>
        </div>
  
    </div>
</body>
  
</html>


 

Navbars

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Bootstrap provides various types of navbars.

NavbarsDescription
BasicIt is initialized by using a nav tag which is an inbuilt tag. Within this tag, we will call the class=” nav bar navbar-default” which are the inbuilt classes of the bootstrap as well that give the top space of your web page to your navigation part and the default gives the default view to that bar which is white.
InvertedIt is similar to a basic navbar. The only difference is instead of the navbar-default we will use the navbar-inverse and the colors of the navigation bar get inverted.
ColoredIn bootstrap, to change the background color of the navigation bar we can use various classes with the nav tags like .bg-primary for Blue, .bg-success for Green, .bg-warning for Yellow, .bg-danger for Red, .bg-secondary for Grey, etc.
Right-alignedThe right-alignedcard footer navbar is used to arrange the links on the right side of the navigation bar instead of the default left arrangement. We simply add a new class in the already existing class i.e. class= “nav navbar-nav” and we add navbar-right to it.
FixedIt can be used to fix a navigation bar at the top of the webpage so that, if you scroll down that webpage you can still view the navigation bar from any position on the page. 
DropdownIt is useful when we are creating a website that has a lot of content in it and is quite big to scroll. We will initialize a div tag with class=” dropdown” to make a drop-down interface and after that, we can add the content to it.
CollapsibleA collapsible navigation bar is used to hide links on the navigation bar and make them visible after clicking a button. Add a navbar-toggle class to a button, then add data-toggle=” collapse”, then add an id to the list of links and add the name of that id inside data-target=”#id”, wrap all the content of the navbar inside a div element with class collapse navbar-collapse

Code:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navbar Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
<script src=
    </script>
</head>
  
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebsiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Page 1<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1.1</a></li>
                        <li><a href="#">Page 1.2</a></li>
                        <li><a href="#">Page 1.3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
</body>
  
</html>


 

Alerts

Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional close button. There are eight types of alerts available in Bootstrap 5. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). Each of the classes has different colors associated with them.

classDescription
alert-primaryIt shows the alert in the color blue. It represents importance.
alert-secondaryIt shows the alert in the secondary background color.
alert-successIt shows the alert in the color green. It represents success.
alert-dangerIt shows the alert in the color red. It represents danger.
alert-warningIt shows the alert in the color yellow. It represents a warning.
alert-infoIt shows the alert in the color light blue. It represents some information.
alert-lightIt shows the alert in the light gray background color.
alert-darkIt shows the alert in the border radius, giving dark gray background color.
alert-dismissibleIt shows an alert with a close button.

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Alerts
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <div style="text-align: center;
   width:600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
            height: 200px; margin: 20px;">
        <div class="alert alert-primary" role="alert">
            Primary Alert
            <div class="alert alert-secondary" role="alert">
                Secondary Alert
            </div>
            <div class="alert alert-success" role="alert">
                Success Alert
            </div>
            <div class="alert alert-danger" role="alert">
                Danger Alert
            </div>
            <div class="alert alert-warning" role="alert">
                Warning Alert
            </div>
            <div class="alert alert-info" role="alert">
                Info Alert
            </div>
            <div class="alert alert-light" role="alert">
                Light Alert
            </div>
            <div class="alert alert-dark" role="alert">
                Dark Alert
            </div>
        </div>
</body>
  
</html>


 

Badges

Badges are numerical indicators to highlight the number of items associated with a link or new or unread item. The notification number is seen when logged in to a particular website and tells the number of news or notifications to see by clicking it. The class. badge within the <span> element is used to create badges. We can have some variations in badges using the following classes:

ClassDescription
Contextual variationsModifier classes like primary, secondary, danger, dark,  etc. are used to change the appearance specifically the color of a badge.
Pill Badges.badge-pill modifier class is used to make badges more rounded (with a larger border radius and additional horizontal padding)
LinksBadges can also be used as a direct link to the new page. 

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div style="text-align: center;width: 600px;">
        <h5 style="color: green;">
            GeeksforGeeks
        </h5>
    </div>
    <div id="canvas" style="width: 600px;
   height: 200px;margin:20px;">
        <h5>
            Primary
            <span class="badge bg-primary">
                GeeksforGeeks
            </span>
        </h5>
        <h5>
            Secondary
            <span class="badge bg-secondary">
                GeeksforGeeks
            </span>
        </h5>
        <h5>
            Success
            <span class="badge bg-success">
                GeeksforGeeks
            </span>
        </h5>
        <h5>
            Danger
            <span class="badge bg-danger">
                GeeksforGeeks
            </span>
        </h5>
        <h5>
            Light
            <span class="badge bg-light text-dark">
                GeeksforGeeks
            </span>
        </h5>
        <h5>
            Dark
            <span class="badge bg-dark">
                GeeksforGeeks
            </span>
        </h5>
        </h4>
        <h5>Pill Badge
            <span class="badge badge-warning badge-pill">
                2
            </span>
        </h5>
  
        <h5>Badge inside an element
            <button type="button" class="btn btn-primary">
                Notifications
                <span class="badge bg-secondary">
                    10
                </span>
        </h5>
        </button>
    </div>
</body>
  
</html>


 

Breadcrumbs

It is used to indicate the current page location with a navigational hierarchy to provide links back to each previous page the user navigated through as well. It adds separators automatically using CSS. It provides a backlink to each previous page the user navigates through. 

Syntax:

<ol class="breadcrumb">
 <li class="breadcrumb-item"> Content .. </li>
</ol>

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Breadcrumbs Example
    </title>
    <link rel="stylesheet" 
             href=
             integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
             crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;
  margin:20px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    GeeksforGeeks
                </li>
            </ol>
        </nav>
    </div>
</body>
  
</html>


 

Button

Bootstrap provides us with different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. Bootstrap also provides classes that can be used for changing the state and size of buttons, and also, provides classes for applying toggle, checkbox, and radio buttons-like effects.

Button typeDescription
SolidBootstrap provides us with a series of classes that corresponds to different solid button styles. These classes are btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-link, btn-dark, btn-light.
OutlinedBootsrap provides us with some classes that gives outlined buttons without a background color. These classes are bt-outline-primary, btn-outline-secondary, btn-outline-danger, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-link, btn-outline
Changing SizeBootstrap provides us with different classes that allow changing the size of the button. These classes are btn-lg, btn-sm, btn-block.
Changing stateBootstrap provides us with “active” and “disabled” classes to change the state of the button.
ToggleWe can make the button to toggle its state by adding data-toggle=”button” attribute-value pair to <button> tag. We can also preset the toggle state of the button to active by adding the “active” class and aria-pressed=”true” attribute-value pair to the <button> tag.
RadioTo get a radio styled buttons, we need to use <input> tag with type=”radio” attribute-value pair and other essential attribute-value combinations classes for the working of radio button
CheckboxWe can make the button checkbox by using <input> tag with type=”checkbox” attribute-value pair, which is surrounded by <label> tag with ca lass value set to “btn” and one of the class from the solid or the outline button class.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
             href=
             integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
             rossorigin="anonymous">
    <title>Button Example</title>
    <!-- Custom CSS -->
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        div.one {
            margin-top: 40px;
            text-align: center;
        }
  
        a,
        button {
            margin-top: 10px;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- Bootstrap Button Classes -->
        <div class="one">
            <button type="button" class="btn btn-primary">
                Primary</button>
            <button type="button" class="btn btn-secondary">
                Secondary</button>
            <button type="button" class="btn btn-success">
                Success</button>
            <button type="button" class="btn btn-danger">
                Danger</button>
            <button type="button" class="btn btn-warning">
                Warning</button>
            <button type="button" class="btn btn-info">
                Info</button>
            <button type="button" class="btn btn-light">
                Light</button>
            <button type="button" class="btn btn-dark">
                Dark</button>
            <button type="button" class="btn btn-link">
                Link</button>
        </div>
        <div class="one">
            <button type="button" class="btn btn-outline-primary">
                outline</button>
            <button type="button" class="btn btn-secondary btn-lg">
                Large</button>
            <button type="button" class="btn btn-success btn-sm">
                Small</button>
            <a href="#" class="btn btn-danger active" role="button" aria-pressed="true">
                Active</a>
            <a href="#" class="btn btn-warning disabled" role="button" aria-disabled="true" tabindex="-1">
                Disabled</a>
            <button type="button" class="btn btn-info" data-toggle="button" 
             aria-pressed="false" autocomplete="off">
                Toggle
            </button>
            <div class="btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-light active">
                    <input type="checkbox" checked autocomplete="off">
                    Checked</label>
                <label class="btn btn-dark">
                    <input type="radio" name="options" id="option1" autocomplete="off">
                    Radio</label>
            </div>
  
        </div>
    </div>
  
</body>
  
</html>


 

Button groups

Bootstrap allows us to group a series of buttons together in a single line vertically or horizontally(without spaces) using the button group class. Bootstrap provides various classes to style, size, and align your button group. These classes are as follows:

ClassDescription
Style Bootstrap allows you to add styles to your buttons using the classes .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link
SizeBootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of “btn-group-*” to your “btn-group” class.
NestingBootstrap also supports vertical button groups stacked in a vertical manner rather than horizontal. Use the class “btn-group-vertical” to create a vertical button group
Vertical Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of  “btn-group” within your main “btn-group” class to have a dropdown menu within your button
Button toolbarCombine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <p>Styling Button Groups</p>
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Click</button>
        <button type="button" class="btn btn-warning">Click</button>
        <button type="button" class="btn btn-success">Click</button>
    </div>
    <br />
    <p>Sizing Button Groups</p>
    <div>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-danger">Click</button>
            <button type="button" class="btn btn-warning">Click</button>
            <button type="button" class="btn btn-success">Click</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger">Click</button>
            <button type="button" class="btn btn-warning">Click</button>
            <button type="button" class="btn btn-success">Click</button>
        </div>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-danger">Click</button>
            <button type="button" class="btn btn-warning">Click</button>
            <button type="button" class="btn btn-success">Click</button>
        </div>
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-danger">Click</button>
            <button type="button" class="btn btn-warning">Click</button>
            <button type="button" class="btn btn-success">Click</button>
        </div>
    </div>
    <br>
    <p>Vertical Button groups</p>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-danger">Click</button>
        <button type="button" class="btn btn-warning">Click</button>
        <button type="button" class="btn btn-success">Click</button>
    </div>
    <p>Nesting of button groups</p>
  
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Click</button>
        <button type="button" class="btn btn-warning">Click</button>
        <div class="btn-group">
            <button type="button" class="btn btn-success 
            dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown</button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Item 1</a></li>
                <li><a class="dropdown-item" href="#">Item 2</a></li>
            </ul>
  
        </div>
    </div>
</body>
  
</html>


 

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells, and thumbnails. 

TypeDescription
BasicA card is a flexible and extensible content container. The building block of a card is the card-body and card. 
Headers and footersThe card header bottom provides a header to the cards and the card footer provides a footer to the cards.
Title and LinksThe card title is used to give a title to the card and the card link is used to provide a called link to the card if required in it. 
ImagesThe images to the card are inserted with card-img-top and with card-img-bottom with the help of these two and img tag is used with it to input the image. 
OverlaysIn this we have to just use an extra class call the card-img-overlay in the same line of code which you have used for card images.
Card GroupIt groups a number of cards together.
List groupIt creates a list of content in a card.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <h4>Basic Card</h4>
        <h2 style="color:green;">GeeksforGeeks</h2>
        <div class="card">
            <div class="card-body">
                A computer science portal for geeks
            </div>
        </div>
        <br />
        <h4>Header and Footer card</h4>
        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body">Content</div>
            <div class="card-footer">Footer</div>
        </div>
        <br />
        <h4>Title and links card</h4>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">
                    Some example text. Some example text.
                </p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>
        <br />
        <h4>Card with images</h4>
        <div class="card" style="width:200px">
            <img class="card-img-top"
                src=
                alt="Card image" style="width:100%">
            <div class="card-body">
                <h4 class="card-title">Developer Guy</h4>
                <p class="card-text">
                    Developer Guy love to develop
                    front-end and back-end
                </p>
            </div>
        </div>
        <br />
        <h4>Card group</h4>
        <div class="card-deck">
            <div class="card-text-white bg-primary">
                <div class="card-body">
                    <h4 class="card-title">PRIMARY</h4>
                </div>
            </div>
            <div class="card-text-white bg-success">
                <div class="card-body">
                    <h4 class="card-title">SUCCESS</h4>
                </div>
            </div>
            <div class="card-text-white bg-danger">
                <div class="card-body">
                    <h4 class="card-title">DANGER</h4>
                </div>
            </div>
        </div>
        <br />
        <h4>List Groups</h4>
        <div class="card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Bootstrap</li>
                <li class="list-group-item">HTML</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
        </div>
    </div>
</body>
  
</html>


 

Carousel

Carousal is used in bootstrap to create slideshows of images on a website. It is used to cycle through a series of images and text. It also includes support for previous/next controls and indicators. Significant parts of a carousal are:

TypeDescription
SlideThe slides are specified in a div with class=”carousel-inner”. The content of each image in a slideshow is defined in a div tag with class= “item”. This can be text or images. The class=”active” is added to one of the slides for it to be visible.
FadeFade class is used to add a fading effect to the transition from one image to another.
IndicatorsThe indicators are the little dots at the bottom of each slide that indicate how many slides there, are and which slide we are currently viewing. The indicators are specified in an ordered list with class=”carousel-indicators”.
CaptionsCaption class is used to add text associated with image to the carousal.
controlsThis code adds “left” and “right” buttons that allow us to go back and forth between the slides manually. The data-slide attribute accepts the keywords “prev” or “next”, which changes the slide position against its current position.

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <h4>Bootstrap | Carousel</h4>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src=
                </div>
                <div class="item">
                    <img src=
                </div>
            </div>
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </center>
</body>
  
</html>


 

Grids

Bootstrap’s grid system allows up to 12 columns across the page. You can use them individually or group the columns together to create wider columns: span 1. span 1. The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design.

component and classDescription
ContainerBootstrap requires a containing element to wrap site contents and house our grid system. The word ‘container’ is a container of row elements and row elements are ‘containers’ of the column elements
RowRows must be placed within a ‘container’ or ‘container-fluid’ for proper alignment and padding. We use rows to create horizontal groups of columns.
ColumnGrid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three “col-sm-4”.
column resetWith the four tiers of grids available, we are bound to run into issues where at certain breakpoints, the columns don’t quite clear right as one is taller than the other column. A command called clearfix is there which fixes any issues regarding that viewport. 
column offsetWe can move the columns to the right by x columns using col-the called linked-offset-x in the class.
Nesting columnsFor nesting columns within a column, we need to add a new row and set of columns. Nested rows should include a set of columns that add up to 12 or less than that.
xs (<576px)This grid class is used for portrait mobile phones.
sm (>=576px)This grid class is used for Landscapes phones
md (>=768px):This grid class is used for Tablets/Phablets
lg (>=992px)This grid class is used for Small-sized Desktops/Laptops
xl (>=1200px)This grid class is used for Larger-sized Desktops/Laptops

Code:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>
                A computer Science portal for Geeks
            </strong>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="bg bg-secondary w-100">
                First Row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-primary w-100">
                Second row
            </div>
        </div>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-6 col-md-3
                                col-lg-4 col-xl-6">
                <div class="well bg bg-success">
                    First Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3
                                col-lg-4 col-xl-6">
                <div class="well bg bg-danger">
                    Second Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3
                                col-lg-4 col-xl-6">
                <div class="well bg bg-warning">
                    Third Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3
                                col-lg-4 col-xl-6">
                <div class="well bg bg-primary">
                    Fourth Column
                </div>
            </div>
        </div>
    </div>
    <footer>
        <hr />
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit
                </a>
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
  
</html>


 

Pagination

Pagination is used to enable navigation between pages on a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and easily scalable.

TypeDescription
BasicIt can be specified using classes .pagination to specify pagination on a list group, .page-item to specify each pagination item in the group, and .page-link to specify the link in the pagination item.
DisabledThe pagination links could be styled to make them appear unclickable by using the .disabled class.
ActiveThe pagination links could be styled to highlight them as the currently active page by using the .active class on the pagination item. 
SizingThe pagination group could be made larger or smaller by using additional classes. There are 3 possible sizes of input groups. pagination-sm for small size, pagination-lg for larger size, .pagination for default size.
AlignmentThe pagination group could be aligned to the right or center by using the flexbox utility classes. Classes used for it are .justify-content-center, .justify-content-end.

Code:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <h5>Basic Pagination</h5>
        <ul class="pagination">
            <!-- Declare the item in the group -->
            <li class="page-item">
                <!-- Declare the link of the item -->
                <a class="page-link" href="#">Previous</a>
            </li>
            <!-- Rest of the pagination items -->
            <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>
        <br />
        <h5>Disabled and active</h5>
        <!-- Declare the pagination class -->
        <ul class="pagination">
            <!-- Specify the disabled class to style this item disabled -->
            <li class="page-item disabled">
                <!-- Specify tabindex to make the link non navigatable -->
                <a class="page-link" href="#" tabindex="-1">
                    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 active">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
        <h5>Pagination Sizing</h5>
        <b>Large Pagination</b>
        <!-- Specify pagination-lg for large pagination group -->
        <ul class="pagination pagination-lg">
            <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>
        <b>Small Pagination</b>
        <!-- Specify pagination-sm for small pagination group -->
        <ul class="pagination pagination-sm">
            <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>
        <b>Normal Pagination</b>
        <!-- Normal size pagination -->
        <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>
    </div>
</body>
  
</html>


 

Dropdowns

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

ClassDescription
DividerThe .dropdown-divider class is used to divide the dropdown menu list by using a thin horizontal line.
HeaderThe .dropdown-header class is used to add a header section inside the dropdown list. 
Disable and active itemsThe .active class is used to add the highlight the list items. The .disabled class is used to disable the list of items. 
Dropdown positionThe .dropright and .dropleft classes are used to set the position of the dropdown list on the left and right sides. 
Dropdown Menu Right AlignedThe .dropdown-menu-right class is used to set the right-align of the dropdown menu.
DropupThe .dropup class is used instead of the .dropdown class to expand the menu list in upwards. 
Dropdown textThe .dropdown-item-text class is used to add plain text in the dropdown menu list. 
Grouped Buttons with a DropdownThe .btn-group class is used to create a group of buttons and the .dropdown-menu class is used to create a dropdown list.
Split Button DropdownsThe .dropdown-toggle-split class is used to split the dropdown buttons.
Vertical Button Group Dropdown ListThe .btn-group-vertical class is used to create a vertical button group with the dropdown list. 

Code:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet"
             href=
             integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
             crossorigin="anonymous">
    <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
        </script>
    <script src=
                integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 
                crossorigin="anonymous">
        </script>
</head>
  
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <!-- Dropdown position-->
        <div class="dropdown dropright">
            <button type="button" class="btn btn-success dropdown-toggle" 
            data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <!-- header and divider -->
                <strong class="dropdown-header ">
                    CS Subjects
                </strong>
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <!--Active and Disabled -->
                <a class="dropdown-item active" href="#">
                    Computer Networks
                </a>
                <div class="dropdown-divider "></div>
                <strong class="dropdown-header">
                    Other Subjects
                </strong>
                <a class="dropdown-item" href="#">
                    Physics
                </a>
                <a class="dropdown-item disabled" href="#">
                    Mathematics
                </a>
                <a class="dropdown-item" href="#">
                    Chemistry
                </a>
            </div>
        </div>
    </div>
</body>
  
</html>


 

List group

List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.

ClassDescription
DisabledAdd .disabled class to a list item to indicate it is disabled. When the content to be disabled is a link/button, we may need to add custom javascript code to disable items completely.
Active Add .active class to the list item to indicate that it is the currently active item.
Hyperlinks and Buttons .list-group-item-action class is used to create actionable list items with hover, disabled and active states.
FlushFlush class to remove some borders and rounded corners data placement so that it looks good in the parent container. 
ContextualContextual classes are used to style list items with suitable backgrounds and colors.
BadgesBadge class is used to add badges to list group items.

Code:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>List Groups example</title>
    <!-- Link Bootstrap Files -->
    <link rel="stylesheet" 
             href=
             integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
             crossorigin="anonymous">
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
        </script>
    <script src=
                integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
                crossorigin="anonymous">
        </script>
</head>
  
<body>
  
    <p>To do list</p>
  
    <ul class="list-group">
        <!-- active list group item -->
        <li class="list-group-item active">study</li>
        <!-- disabled list group item -->
        <li class="list-group-item disabled">pay bills</li>
        <li class="list-group-item">call mom</li>
        <!-- Contexual list group item -->
        <li class="list-group-item
  list-group-item-info">
            Info list group item
        </li>
    </ul>
    <div>
        <!-- hyperlink list group item -->
        <a href="#" class="list-group-item list-group-item-action">drop an email</a>
    </div>
    <!-- badge list group item -->
    <button type="button" class="list-group-item list-group-item-action">
        UPDATES
        <span class="badge badge-pill badge-danger">2</span>
    </button>
</body>
  
</html>


 

Popovers

A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.

Syntax:
data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover.

ClassDescription
Right-alignmentThe popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “right”.
Left-alignmentThe popover content is displayed at the left of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data placement = “left”.
Bottom-alignmentThe popover content is displayed at the bottom of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data placement = “bottom”.
Top-alignmentThe popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “top”.

Code:

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <!-- Link Bootstrap CSS -->
      <link rel="stylesheet" href=
      <script src=
      </script>
      <script src=
      </script>
   </head>
   <body>
      <div class="container">
         <h3>Popover Example</h3>
         <a href="#" data-toggle="popover" title="Popover Header"
            data-content="Some content inside the popover">
         GeeksforGeeks</a>
      </div>
      <script>
         $(document).ready(function () {
          $('[data-toggle="popover"]').popover();
         });
      </script>
   </body>
</html>


 

Spinners

The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating different styles of spinners by modifying their appearance, size, and placement.

ClassDescription
BorderThe spinner-border class is used inside the div  for rotating the spinner  
GrowThe spinner grows and class is used for growing spinners and showing that some content is loading.
MarginWe can add margin to the spinners in Bootstrap using the margin utility class in Bootstrap. 
PlacementPlacement classes or flexbox classes are used to place spinners at different positions like the center, end, or start. 
Size The size of the spinners can be adjusted according to our needs using the Bootstrap classes. , utility For ex:  .spinner-border-sm and .spinner-grow-sm classes can be used to make smaller spinners that can fit inside different components.

Code:

HTML




<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport"
                  content="width=device-width">
      <link href=
         rel="stylesheet">
   </head>
   <body>
      <h2 class="text-success text-center">
         GeeksforGeeks
      </h2>
      <h5 class="text-info text-center">
      Bootstrap Spinner Border
      </h4>
      <div class="d-flex justify-content-center">
         <div class="spinner-border text-secondary"
            role="status">
         </div>
         <span>Please Wait </span>
      </div>
      <br/>
      <h5 class="text-info text-center">
         Bootstrap Spinner Grow
      </h5>
      <div class="d-flex justify-content-center">
         <span>
            <h5>Processing</h5>
         </span>
         <div class="spinner-grow text-primary"
            role="status">
         </div>
      </div>
      <br/>
      <h5 class="text-info text-center">
         Spinner Placement using Bootstrap classes
      </h5>
      <br/>
      <h5 class=" text-center">
         Using the Text Placement Classes
      </h5>
      <div class="text-center">
         <div class="spinner-border m-5 " role="status">
         </div>
      </div>
      <h5 class="text-center">
         Using the Flex Box Classes
      </h5>
      <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
         </div>
      </div>
   </body>
</html>


 

scroll spy

Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy is used to update the navigation links when scrolling the page. The following attributes are added with the elements for the implementation of this feature. 

AttributeDescription
Data-spyIt is an attribute that is to be added with the element which is used as the scrollable area (in the above example we are taking it as the body). 
The value of data-spy is scroll.
Data-targetThis attribute is used to connect the navigation bar with the scrollable area. It takes the value as the name of the ID or class of the navigation bar.
Data-offsetThis attribute specifies the number of pixels to offset from the top when calculating the position of the scroll.

Code:

HTML




<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport"
         content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href=
      <script src=
      </script>
      <script src=
     </script>
      <style>
         body {
         position: relative;
         }
         ul.nav-pills {
         top: 20px;
         position: fixed;
         }
         div.col-sm-9 div {
         height: 250px;
         font-size: 18px;
         }
         a {
         color: green;
         }
         #section1 {
         color: white;
         background-color: green;
         }
         #section2 {
         color: green;
         background-color: white;
         }
         #section3 {
         color: white;
         background-color: green;
         }
         #section4 {
         color: green;
         background-color: white;
         }
         @media screen and (max-width: 810px) {
         #section1,
         #section2,
         #section3,
         #section4 {
         margin-left: 150px;
         }
         }
      </style>
   </head>
   <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
      <div class="container">
         <div class="row">
            <nav class="col-sm-3" id="myScrollspy">
               <ul class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#section1">
                     Section 1</a>
                  </li>
                  <li><a href="#section2">Section 2</a></li>
                  <li><a href="#section3">Section 3</a></li>
                  <li><a href="#section4">Section 4</a></li>
               </ul>
            </nav>
            <div class="col-sm-9">
               <div id="section1">
                  <center>
                     <h1>Section 1</h1>
                     <h3>GeeksforGeeks</h3>
                     <h5>A computer science portal for geeks.</h5>
                     <h6> This portal has been created to
                        provide well written, well thought
                        and well explained solutions for
                        selected questions related to
                        programming, algorithms, other
                        computer science subjects.
                     </h6>
                     <p>Scroll this section and see the
                        navigation list while scrolling.
                     </p>
                  </center>
               </div>
               <div id="section2">
                  <center>
                     <h1>Section 2</h1>
                     <h3>GeeksforGeeks</h3>
                     <h5>A computer science portal for geeks.</h5>
                     <h6> This portal also provide GATE
                        previous year papers, short notes
                        for the aspirants.
                     </h6>
                     <p>Scroll this section and see the
                        navigation list while scrolling.
                     </p>
                  </center>
               </div>
               <div id="section3">
                  <center>
                     <h1>Section 3</h1>
                     <h3>GeeksforGeeks</h3>
                     <h5>A computer science portal for geeks.</h5>
                     <h6>This portal also provide interview
                        questions asked by private and
                        public sectors.
                     </h6>
                     <p>Scroll this section and see the
                        navigation list while scrolling.
                     </p>
                  </center>
               </div>
               <div id="section4">
                  <center>
                     <h1>Section 4</h1>
                     <h3>GeeksforGeeks</h3>
                     <h5>A computer science portal for geeks.</h5>
                     <h6>It also provide Internship aor
                        contributor program for students.
                     </h6>
                     <p>Scroll this section and see the
                        navigation list while scrolling.
                     </p>
                  </center>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>


 

Tooltips

A tooltip is quite useful for showing the description of different elements in the webpage. The tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depend on the 3rd party library Tether for positioning. We can even customize this tooltip according to our requirements. Some of them are:

ClassDescription
PlacementWe can place a tooltip at the top, bottom, left, and right of an element. using data-placement attribute.
HtmlWe can add HTML within a tooltip as the content of the tooltip.
OffsetWe can set the offset of the tool-tip relative to the target. 
AnimationBy default, the animation which fades in and fades out is added to the tooltip using the data animation attribute, we can remove this animation by setting the attribute to false. 
TriggerWe can add an event that will trigger a tooltip, by default a tooltip is triggered on “hover and focus“, various events that are allowed are,- click, hover, focus, and manual. 

Code:

HTML




<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Tooltip</title>
      <meta charset="utf-8">
      <meta name="viewport"
         content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href=
      <script src=
      <script src=
      <script src=
   </head>
   <body style="text-align:center;">
      <div class="container">
         <h1 style="color:green;">
            GeeksforGeeks
         </h1>
         <h2>Positioning Tooltip</h2>
         <button data-toggle="tooltip" data-placement="top"
            title="Top tooltip">Top
         </button>
         <button data-toggle="tooltip" data-placement="bottom"
            title="Bottom tooltip">Bottom
         </button>
         <button data-toggle="tooltip" data-placement="left"
            title="Left tooltip">Left
         </button>
         <button data-toggle="tooltip" data-placement="right"
            title="Right tooltip">Right
         </button>
      </div>
      <script>
         $(document).ready(function () {
          $('[data-toggle="tooltip"]').tooltip();
         });
      </script>
   </body>
</html>


 

Jumbotron

Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor’s attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value. It is used to Image showcase, Highlight content, Introduction for Certain Topics.

Fluid Jumbotron: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.

Code:

HTML




<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet"
               href=
               integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
               crossorigin="anonymous">
   </head>
   <body>
      <div class="jumbotron jumbotron-fluid">
         <div class="container">
            <h1 class="display-4">Jumbotron Example</h1>
            <p class="lead">
               This is a modified jumbotron that
               occupies the entire horizontal
               space of its parent.
            </p>
         </div>
      </div>
   </body>
</html>


 

Toasts

Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions.

  • .toast: It helps to create a toast.
  • .toast-header: It helps to create the toast header.
  • .toast-body: It helps to create toast body
  • .toast(“show”): It shows the toast
  • .toast(“hide”): It hides the toast
  • .toast(“dispose”): It disposes of the toast

Some of the events of toast are:

EventDescription
show.bs.toast It happens when the toast is about to be shown. 
shown.bs.toastIt happens when the toast is shown. 
hide.bs.toast It happens when the toast is about to be hidden. 
hidden.bs.toast It happens when the toast is fully hidden. 

Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Toast Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <div class="container mt-3">
        <h3>.toast(options)</h3>
  
        <p>
            When we click the button below there
            would be delay of the toast to 8000
            milliseconds.
        </p>
  
        <button type="button" class="btn btn-primary" 
        id="myBtn">Show Toast</button>
        <div class="toast mt-3">
            <div class="toast-header">
                Toast Header
            </div>
            <div class="toast-body">
                Some text inside the toast body
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 2000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
  
</html>


 

Modal

Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Syntax:

<div class="modal"> Contents... <div>
ClassDescription
Popovers It can be added inside the modal. When modals are closed, popovers within are also automatically dismissed. 
ContentWe can trigger the same modal with different data 
modal-xlDefault max-width of a Bootstrap modal is 500px. This class provides the largest modal size with a max-width of 1140px. 
modal-lg This class provides a large modal size with a max-width of 800px. 
modal-smThis class provides the largest modal size with a max-width of 300px. 

Code:

HTML




<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
                  integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                  crossorigin="anonymous"></script>
      <script src=
                  integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                  crossorigin="anonymous"></script>
                   integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
         crossorigin="anonymous"></script>
      <link rel="stylesheet"
               href=
               integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
               crossorigin="anonymous">
      <title>bootstrap | Modal</title>
      <style>
         h1,h6 {
         margin: 2%;
         }
         .btn {
         margin-left: 2%;
         }
      </style>
   </head>
   <body>
      <center>
      <h1 style="color:green;">GeeksforGeeks</h1>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal"
         data-target="#exampleModal">Launch Modal</button>
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalLabel" style="color:green;">
                     GeeksforGeeks
                  </h6>
                  <!-- The title of the modal -->
                  <button type="button" class="close" data-dismiss="modal"aria-label="Close">
                  <span aria-hidden="true">×</span>
                  </button>
               </div>
               <div class="modal-body">
                  <!-- The content inside the modal box -->
                  <p>The Content inside the modal </p>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-secondary"
                     data-dismiss="modal">Close</button>
                  <!-- The close button in the bottom of the modal -->
                  <button type="button" class="btn btn-primary">okay</button>
                  <!-- The save changes button in the bottom of the modal -->
               </div>
            </div>
         </div>
      </div>
   </body>
</html>


 

Borders

Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred to as Additive classes and those that are used to remove borders are referred to as subtractive classes.

ClassDescription
.borderThis class adds a border all around the element.
.border-top This class adds a border on the top edge of the element.
.border-rightThis class adds a border on the right of the element.
.border-bottomThis class adds a border on the bottom of the element.
.border-left This class adds a border on the left edge of the element.
RadiusIn a border, the radius is used to make the corner of the border curved. The more the radius, the more curved and round it will be. Classes in bootstrap to add radius are rounded, rounded-top, rounded-bottom, rounded-left, rounded-right, and rounded-‘number’.
ColorAny color can be added to the border by using border-color classes border-primary,border-success, border-danger etc. that are available in bootstrap. 

Code:

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Borders Example</title>
      <link rel="stylesheet" href=
      <!-- Link Bootstrap JS and JQuery -->
      <script src=
      <script src=
      <script src=
      <style>
         /* CSS for Square boxes */
         span {
         display: inline-block;
         width: 70px;
         height: 70px;
         margin: 6px;
         background-color: #DCDCDC;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h4>Additive Border Classes</h4>
         <span class="border border-dark"></span>
         <span class="border-top border-dark"></span>
         <span class="border-right border-dark"></span>
         <span class="border-bottom border-dark"></span>
         <span class="border-left border-dark"></span>
      </div>
      <div class="container">
         <h4>Subtractive Border Classes</h4>
         <span class="border border-dark"></span>
         <span class="border border-0 border-dark"></span>
         <span class="border border-top-0 border-dark"></span>
         <span class="border border-right-0 border-dark"></span>
         <span class="border border-bottom-0 border-dark"></span>
         <span class="border border-left-0 border-dark"></span>
      </div>
      <h4>Color Border:</h4>
      <span class="border border-primary"></span>
      <span class="border border-secondary"></span>
      <span class="border border-success"></span>
      <span class="border border-danger"></span>
      <span class="border border-warning"></span>
      <span class="border border-info"></span>
      <span class="border border-light"></span>
      <span class="border border-dark"></span>
      </div>
      <h4>Border Radius</h4>
      <span class="rounded"></span>
      <span class="rounded-top"></span>
      <span class="rounded-right"></span>
      <span class="rounded-bottom"></span>
      <span class="rounded-left"></span>
      <span class="rounded-circle"></span>
      <span class="rounded-0"></span>
      </div>
   </body>
</html>

We have Completer tutorial post with the proper roadmap of Bootstrap that includes Bootstrap 4 and Bootstrap 5. This tutorial contains each and every classes of any component with multiple possible examples.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!