Bootstrap Components

Bootstrap provides dozen of reusable components. They are built to provide dropdowns, buttons, icons, etc to our web pages. Bootstrap components are responsively built with base and modifier classes.

Base class and modifier class in Bootstrap components.

The base-modifier nomenclature is used to build components in bootstrap.
The shared properties are grouped together in the base class like .btn
The styling variants are confirmed to modifier class like .btn-info.

Let us look at some components of Bootstrap.

Bootstrap Accordion

Accordions are used when we need to hide and show large contents. It uses collapse which makes it collapsible.

Use .accordion class to create accordion.
Accordion class is added with id="accordionSection".
Contents are added within .accordion-item class.
Each item has .accordion-header class and .accordion-body class.
For adding collapsable effects to buttons of accordion use .accodion-button collapsed

Example: Creating Bootstrap Accordion

Here is the program to illustrate accordion in Bootstrap. The program below shows an accordion containing three items. The buttons in the accordion class are made collapsable and you can write any length text within the .accordion-item class.

<!doctype html>
<html lang="en">

<head>
    <title> Bootstrap Accordion </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
</head>

<body>
    <div class="container ">
        <h3 >Accordion</h3>
        <div class="accordion" id="accordionSection">
            <div class="accordion-item ">
                <h2 class="accordion-header">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">Item 1</button></h2>
                <div class="accordion-collapse collapse" id="collapseOne" data-bs-parent="#accordionSection">
                    <div class="accordion-body">
                        Add lengthy contents to accordion.
                    </div>
                </div>

            </div>
            <div class="accordion-item  ">
                <h2 class="accordion-header">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Item 2</button></h2>
                <div class="accordion-collapse collapse" id="collapseTwo" data-bs-parent="#accordionSection">
                    <div class="accordion-body">
                        Add more contents to accordion.
                    </div>
                </div>

            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">Item 3</button></h2>
                <div class="accordion-collapse collapse" id="collapseThree" data-bs-parent="#accordionSection">
                    <div class="accordion-body">
                        Add more contents to accordion
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

Output:

The output of the above program is given below.

Accordion

Bootstrap Alerts

Alerts are used for any feedback or alert messages. Alert text can be of any length.

To create alert box add .alert class to <div> tag.
Add contextual classes within the alert box using .alert-success , .alert-success , .alert-danger , .alert-warning.

Example: Creating Bootstrap Alerts

Let's see an example to add alerts to the webpage. Here we have shown different types of the alert box using contextual color.

<!doctype html>
<html lang="en">
<head>
    <title> Bootstrap  </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container ">
        <div class="alert alert-primary" role="alert">
          A simple primary alert
        </div>
        <div class="alert alert-secondary" role="alert">
          A simple secondary alert
        </div>
        <div class="alert alert-success" role="alert">
          A simple success alert
        </div>
        <div class="alert alert-danger" role="alert">
          A simple danger alert
        </div>
        <div class="alert alert-warning" role="alert">
          A simple warning alert
        </div>
        <div class="alert alert-info" role="alert">
          A simple info alert
        </div>
        <div class="alert alert-light" role="alert">
          A simple light alert
        </div>
        <div class="alert alert-dark" role="alert">
          A simple dark alert
        </div>
	</div>
</body>
</html>

Output:

Let us see how contextual alerts look like.

Alerts

Bootstrap Badges

Badges can be used as links or buttons to provide numerical values.

Use .badge class to create a badge
Add background color using a background-color utility class

Example: Creating Bootstrap Badges

Here is an example to add a badge to the webpage. Here, we have added a badge to a button class. The badge is modified using the .bg-secondary class.

<!doctype html>
<html lang="en">
<head>
    <title> Bootstrap  </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
   <h2>Bootstrap badges </h2>
   <button type="button" class="btn btn-primary">
     Messages <span class="badge bg-secondary">4</span>
   </button>
  </div>
</body>
</html>

Output:

The output of the above program is given below.

Badge

Bootstrap Button group

Buttons can be grouped together and placed on a single line. For that, we use a button group. Wrap a series of buttons with .btn in .btn-group class.

Example: Creating Button group using Bootstrap

Let see an example of a button group. Here we have used the .btn-group to include a series of buttons.

<!DOCTYPE html>
<html>
<head>
    <title> Bootstrap  </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<h2>Bootstrap button-group </h2>
		<div class="btn-group" role="group" >
			<button type="button" class="btn btn-primary">Primary</button>
			<button type="button" class="btn btn-success">Success</button>
			<button type="button" class="btn btn-info">Info</button>
	</div>
</div>
</body>
</html>

Output:

Here is an output of the above program.

Button group

Bootstrap Cards

The bootstrap card is a flexible and extensible content container that has options for headers and footers with various content, contextual background colors, and a powerful display. Cards are built with little markup and styles but deliver high control and customization.

Example: Creating Cards using Bootstrap

A card is created using the .card class and the body of the card is created using .card-body. Here is a simple example to illustrate how a card is created.

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>
<body>
	<div class="container">
		<h2>Card creation</h2>
		<div class="card">
			<div class="card-body"> card</div>
		</div>
	</div>
</body>
</html>

Output:

Here is the output for the above code.

card-creation

Bootstrap Modal

Modal is generally used by web developers to make users aware of some important information appearing on the web page. It can be some confirmation message, warning message, or cookies.

.modal- It is used to denote the start of any new modal.
.modal-dialog - Setting up width and margin to the modal.
.modal-content - It denotes the starting of content in the modal
.modal-header - It is used for styling the header of the modal. Add a catchy heading, style it as you like.
.modal-title - Under the heading class, there is a title where we mention the title of the modal.
.modal-body - Here add text or images and style it as you like.
.modal-footer - Footer generally has a button that allows your permission to accept or close the modal.
.fade - Transition effect can be used using .fade in the modal. You can choose between in and out effect.

Example: Creating Bootstrap Modal

Here is a small program to create a bootstrap model. The modal contains a warning button that displays a specific message when clicked. The modal also contains footer buttons to save or close the modal.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Warning!!</h2> 
  
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Open</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
          
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"></button>
          <h4 class="modal-title">Header</h4>
        </div>
        <div class="modal-body">
          <p>You are in danger.</p>
        </div>
        <div class="modal-footer">
		   <button type="button" class="btn btn-info">Save changes</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
  </div>
</div>
 </body>
</html>

Output:

This is how a simple modal looks like.

Modal

Bootstrap Navbar

Bootstrap Navbar provides attractive headers to the website pages. It is used for styling the website's name and navigating the drop-down menus. Navbar is generally placed at the top of the web page. These are responsive in nature. Before creating a navbar there are some important points to know.

Add .navbar, .navbar-default with navbar class. For responsive sites add .navbar-expand-{xs,sm,md,lg,xl} along with .navbar depending on screen size.
Add a header .navbar-header with <div> class.
Add a .navbar-brand with <a> tag
For list of menus add .navbar or nav navbar-nav in <ul> tag.

Example: Creating Navbar using Bootstrap

Here is a small example of how a navbar works. A horizontal menu is created using the navbar class. The .container-fluid is used for the full-width screen.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light>
   <div class ="container-fluid">
    <div class=" navbar navbar-header">
	 <a class="navbar-brand" href="#">studytonight</a>
	 </div>
	 <ul class ="nav navbar-nav">
	  <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Tests</a></li>
      <li><a href="#">About us</a></li>
	 </ul>
  </div>
</nav>
</body>
</html>

Output:

In the above example, A light theme background is used. we can set the background as per our requirement.

Conclusion

We have seen a list of components used in bootstrap. Use navbar for creating the beautiful header, alert box for some alert message, accordion for some long textual contents, and so on. Add as many components as we want, and make your websites stand out.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap Components

Bootstrap Accordion

Example: Creating Bootstrap Accordion

Output:

Bootstrap Alerts

Example: Creating Bootstrap Alerts

Output:

Bootstrap Badges

Example: Creating Bootstrap Badges

Output:

Bootstrap Button group

Example: Creating Button group using Bootstrap

Output:

Bootstrap Cards

Example: Creating Cards using Bootstrap

Output:

Bootstrap Modal

Example: Creating Bootstrap Modal

Output:

Bootstrap Navbar

Example: Creating Navbar using Bootstrap

Output:

Conclusion