Scribd
Upload
88 views16 pages

List of Components Bootstrap

The document discusses different components that can be used to build navigation bars in Bootstrap, including standard navbar elements, dropdown menus, colored navbar backgrounds, and adding search forms and buttons. It provides examples of code for creating basic navbars, dropdown navbars, colored navbars, and navbars with forms and buttons. Bootstrap navigation bars are useful for making websites more navigable and user-friendly.

Uploaded by

Changdev Hirade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
88 views16 pages

List of Components Bootstrap

The document discusses different components that can be used to build navigation bars in Bootstrap, including standard navbar elements, dropdown menus, colored navbar backgrounds, and adding search forms and buttons. It provides examples of code for creating basic navbars, dropdown navbars, colored navbars, and navbars with forms and buttons. Bootstrap navigation bars are useful for making websites more navigable and user-friendly.

Uploaded by

Changdev Hirade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

List of components: 

1. Jumbotron: It simply put extra attention to particular content or


information by making it larger and more eye-catching.
2. Alerts: It is a popup with a predefined message that appears after a
particular action.
3. Buttons: It is customized buttons that are used to perform an
action in the form, dialogue box, etc. They are in multiple states,
sizes and have predefined styles.
4. Button group: It is a group of buttons aligned in a single line and
they can be arranged both vertically as well as horizontally.
5. Badge: It Is a labeling component that is used to add additional
information.
6. Progress Bar: It is used to show the progress of a particular
operation with a custom progress bar. They have text labels,
stacked bars, and animated backgrounds.
7. Spinner: The spinner displays the loading state of websites or
projects. They are built with HTML, CSS and don’t require any
JavaScript.
8. Scrollspy: It keeps updating the navigation bar to the currently
active link based on the scroll position in the viewport.
9. List group: It is used to display an unordered series of content in a
proper way.
10. Card: It provides a customizable, extensible, and flexible content
container.
11. Dropdown: It is used to drop the menu in the format of a list of
links, they are contextual and toggleable overlays.
12. Navs: It is used to create a basic and simple navigation menu
with a .nav base class.
13. Navbar: The navigation bar is the headers at the top of a
website or webpage.
14. Forms: Forms are used to take multiple inputs at once from the
user. Bootstrap has two layouts available stacked and inline.
15. Input groups: They have extended form controls by adding a
button, button group or text on either side of inputs.
16. Breadcrumb: It provides the location of the current page in a
navigational hierarchy and also adds separators through CSS.
17. Carousel: It is a slide show of image or text content built with
CSS 3D and JavaScript.
18. Toast: It displays a message for a small amount of time, a few
seconds. They are alert messages designed to imitate push
notifications popular in desktop and mobile systems.
19. Tooltip: It provides small information about the element/link
when the mouse hovers over the element.
20. Popovers: It displays extra information about the element/link
when clicked on it.
21. Collapse: It is a JavaScript plugin that is used to show or hide
the content.
22. Modal: It is a small popup window positioned over the actual
window.
23. Pagination : It is used to easily navigate between different
pages, a large block of connected links is used for making them
accessible.
24. Media Object: The Media object is used for repetitive and
complex components like tweets or blogs. The images or videos
are placed/aligned to the left or the right of the content.

Navigation Bar
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. The navigation bar is placed
at the top of the page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation Bar</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
Sample Navbar
</h1>

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


<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Algo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Languages</a>
</li>
</ul>
</nav>
</div>
</body>
</html>

Colored Navbar: The .bg-color classes is used to change the


background color of the navbar. The bg-color classes are: .bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light. The .navbar-dark class is used to set
links text color to white and .navbar-light class is used to set links text
color to black.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navigation Bar</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            Colore Navbar
        </h1>
        <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
        <br><br>
        <nav class="navbar navbar-expand-sm bg-success navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Algo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Languages</a>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

Dropdown Navbar: The navbar can be created by using dropdown menu. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navigation Bar</title>
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            DropDown Navbar
        </h1>
        <h2 style="text-align:center;">Dropdown Navbar</h2>
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/
gfg_transparent_white_small.png "
                    alt="logo"
                    style="width:40px;">
            </a>
            
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#"
                            id="navbardrop" data-toggle="dropdown">
                            Languages
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>

Forms and Buttons Navbar: The <form class=”form-inline”> element is


used to group inputs and button side-by-side. The .input-group-
prepend or .input-group-append class is used to attach icon of input text
fields.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navigation Bar</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            Button Navbar
        </h1>
        <h2 style="text-align:center;">Forms and Buttons Navbar</h2>
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
            
            
            <div class="collapse navbar-collapse" id="collapse_Navbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Algo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DS</a>
                    </li>
                </ul>
            </div>
            <form class="form-inline" action="#">
                <input class="form-control mr-sm-2"
                    type="text" placeholder="Search">
                <button class="btn btn-primary" type="submit">
                    Search
                </button>
            </form>
        </nav>
    </div>
</body>
</html>

Buttons
Bootstrap provides 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. Also, it provides classes for applying toggle, checkbox and
radio buttons like effects.
Bootstrap contains many classes to set the style of the button element. The
list of button classes are given below:
 .btn
 .btn-primary
 .btn-secondary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-dark
 .btn-light
 .btn-link

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/
bootstrap.min.css ">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
Button Componant
        </h1>
        <h2>Buttons</h2>
        <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-warning">
            Warning</button>
        <button type="button" class="btn btn-danger">
            Danger</button>
    </div>
</body>
</html>               

Note: The <a>, <button> and <input> elements are used to hold the button
classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            BUTTON USING INPUT
        </h1>
        <h2>Button Elements</h2>
        <input class="btn btn-success"  
            type="button" value="Input Button">
        <input class="btn btn-success"  
            type="submit" value="Submit Button">
        <input class="btn btn-success"  
            type="reset" value="Reset Button">
        <button class="btn btn-success" type="button">
            Button</button>
        <a href="#" class="btn btn-success" role="button">
            Link Button</a>
    </div>
</body>
</html>   

Block Level Buttons: The .btn-block class is used to create block-level


button which takes all width of parent element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            BLOCK BUTTON
        </h1>
        <h2>Block Level Buttons</h2>
        <button type="button" 
            class="btn btn-block btn-primary">
            Block Level Button
        </button>
        <button type="button" 
            class="btn btn-block btn-success">
            Block Level Button
        </button>
    </div>
</body>
</html>     

Progress Bars
A progress bar is used to display the progress of a process on a computer. A
progress bar displays how much of the process is completed and how much
is left. You can add a progress bar on a web page using predefined bootstrap
classes. Bootstrap provides many types of progress bars.               
           
Syntax: 
 
<div class="progress">
<div class="progress-bar" style="width:x%"></div>
<div>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Progress Bar</title>
    
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body>
    <h1 style="color:green;text-align:center;">
        PROGRESS BAR
    </h1>
    <div class="container">
        <div class="progress">
            <div class="progress-bar"
                style="width:80%">
              </div>
        </div>
    </div>
</body>
</html>

Labeled Progress Bar: The labeled progress bar is used to display the text
inside the progress bar to show the task completion percentage.

Syntax:  
<div class="progress">
<div class="progress-bar" style="width:x%">x%</div>
<div>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Progress Bar</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
</head>
<body style="text-align:center;">
    <h1 style="color:green;">
        LABELED PROGRESS BAR
    </h1>
    <div class="container">
        <div class="progress">
            <div class="progress-bar"
                style="width:80%;">
                80%
            </div>
        </div>
    </div>
</body>
</html>

List Groups
List Groups are used to display a series of content in an organized way.
Use .list-group and .list-group-item classes to create a list of items. The .list-
group class is used with <ul> element and .list-group-item is used with <li>
element.

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap List Group</title>

    

    <link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">

</head>

<body>

    <h1 style="color:green;text-align:center;">

        List Component

    </h1>

    <div class="container">

        <ul class="list-group">

            <li class="list-group-item">

                Data Structure
              </li>

            <li class="list-group-item">

                Operating System

              </li>

            <li class="list-group-item">

                Algorithm

              </li>

        </ul>

    </div>

</body>

</html>

Active list item: The .active class is used to highlight the current item. 

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap List Group</title>

    <link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">

</head>

<body>

    <h1 style="color:green;text-align:center;">

        List Item Active

    </h1>

    <div class="container">

        <h2>List Groups</h2>

        <ul class="list-group">

            <li class="list-group-item active">

                Data Structure

              </li>

            <li class="list-group-item">

                Operating System
              </li>

            <li class="list-group-item">

                Algorithm

              </li>

        </ul>

    </div>

</body>

</html>

Alerts
We often see certain alerts on some websites before or after completing an
action. These alert messages are highlighted texts that are important to take
into consideration while performing a process. Bootstrap allows showing
these alert messages on the website using predefined classes.
The .alert class followed by contextual classes are used to display the alert
message on website. The alert classes are: .alert-success, .alert-info, .alert-
warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-
dark.

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Alerts</title>

    <link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">

</head>

<body>

    <h1 style="color:green;text-align:center;">

        Alert Component

    </h1>

    <div class="container">

        <div class="alert alert-success">

            <strong>Success alert!</strong>

        </div>

        <div class="alert alert-info">


            <strong>Info alert!</strong>

        </div>

        <div class="alert alert-warning">

            <strong>Warning alert!</strong>

        </div>

        <div class="alert alert-danger">

            <strong>Danger alert!</strong>

        </div>

        <div class="alert alert-primary">

            <strong>primary alert!</strong>

        </div>

        <div class="alert alert-secondary">

            <strong>Secondary alert!</strong>

        </div>

        <div class="alert alert-light">

            <strong>Light alert!</strong>

        </div>

        <div class="alert alert-dark">

            <strong>Dark alert!</strong>

        </div>

    </div>

</body>

</html>

Closing Alerts: The .alert-dismissible class is used within .container class to


close the alert message. Then use class=”close” and data-
dismiss=”alert” to link a button element.

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Alerts</title>

    

    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">

</head>

<body>

    <h1 style="color:green;text-align:center;">

        Closing Alerts

    </h1>

    <div class="container">

        <div class="alert alert-success alert-dismissible">

            <strong>Success alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

        <div class="alert alert-info alert-dismissible">

            <strong>Info alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

        <div class="alert alert-warning alert-dismissible">

            <strong>Warning alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

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

            <strong>Danger alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>
        </div>

        <div class="alert alert-primary alert-dismissible">

            <strong>primary alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

        <div class="alert alert-secondary alert-dismissible">

            <strong>Secondary alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

        <div class="alert alert-light alert-dismissible">

            <strong>Light alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

        <div class="alert alert-dark alert-dismissible">

            <strong>Dark alert!</strong>

            <button type="button" class="close"

                data-dismiss="alert">

                ×

            </button>

        </div>

    </div>

</body>

</html>

You might also like