DataFlair

Bootstrap Tutorials

Bootstrap Progress Bars 0

Bootstrap Tutorials

Bootstrap Progress Bars

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div class=”progress” style=”height:50px;”> <div class=”progress-bar progress-bar-striped progress-bar-animated” style=”width:40%;height:50px;” >40%</div> </div> </body> </html>  

Bootstrap Badges 0

Bootstrap Tutorials

Bootstrap Badges

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <h2>This is some text<span class=”badge bg-warning”>12</span></h2> <button type=”button” class=”btn btn-danger”> Messages<span class=”badge bg-primary”>10</span> </button> </body> </html>  

Bootstrap Alerts 0

Bootstrap Tutorials

Bootstrap Alerts

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div class=”alert alert-danger alert-dismissible fade show”> Error! <button type=”button” class=”btn-close” data-bs-dismiss=”alert”></button> <a class=”alert-link”>Click here to read</a> </div> </body> </html>...

Bootstrap Images 0

Bootstrap Tutorials

Bootstrap Images

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <img src=”C:\\Users\\Lenovo\\Downloads\\bird.jpg” class=”img-fluid mx-auto d-block”> </body> </html>  

Bootstrap Tables 0

Bootstrap Tutorials

Bootstrap Tables

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <table class=”table table-striped table-hover”> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>28</td> </tr> <tr> <td>Rahul</td> <td>30</td> </tr>...

Bootstrap Text Colors 0

Bootstrap Tutorials

Bootstrap Text Colors

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <p class=”text-danger”>Some text</p> </body> </html>  

Grid System in Bootstrap 0

Bootstrap Tutorials

Grid System in Bootstrap

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” crossorigin=”anonymous”></script> </head> <body> <div class=”row”> <div class=”col” style=”background-color:yellow;”>1</div> <div class=”col” style=”background-color: aqua;”>2</div> <div class=”col” style=”background-color:bisque”>3</div> </div> </body> </html>  

Introduction to Bootstrap 0

Bootstrap Tutorials

Introduction to Bootstrap

Program 1 <html> <head> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script> </head> <body> <div class=”container”style=”border:2px solid black; “> <h3>Welcome</h3> </div> </body> </html>  

what is bootstrap 0

Bootstrap Tutorials

What is Bootstrap?

In this tutorial, we will learn what is bootstrap, its history, features, advantages, package and some interview questions. Let’s start with bootstrap introduction. What is Bootstrap? Bootstrap is an open-source styling tool which helps...