Content

  • Bootstrap Buttons
  • Bootstrap Forms
  • Bootstrap List Groups
  • Bootstrap navbar
  • Bootstrap Carousel
  • Bootstrap Modal

Bootstrap Buttons

Output Code 
<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>
 
<button type="button" class="btn btn-warning">Warning</button>
 
<button type="button" class="btn btn-danger">Danger</button>

Bootstrap Forms

Output Code 
<form>
<div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
    <label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap List Groups

Output Code
  • New
  • Deleted
  • Warnings 
<ul class="list-group">
<li class="list-group-item">New </li>
<li class="list-group-item">Deleted </li>
<li class="list-group-item">Warnings </li>
</ul>

Bootstrap Navbar

Output :
Code :
<nav class="navbar navbar-expand-md navbar-light" style="border: 2px solid black;">
<a class="navbar-brand" href="#">Website Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link"  href="home.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link"  href="reviews.html">Reviews</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
    </li>
    </ul>
</div>
</nav>

Bootstrap Carousel

Output :
Code :
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
</ul>
                                    
<!-- The slideshow -->
<div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://revolutionit.in/img/slider/e2.jpg" style="width:100%;" >
    </div>
    <div class="carousel-item">
    <img src="https://revolutionit.in/img/slider/e5.jpg" style="width:100%;" >
    </div>
    <div class="carousel-item">
    <img src="https://revolutionit.in/img/slider/e1.jpg" style="width:100%;" >
    </div>
</div>
                                    
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
</a>
</div>

Bootstrap Modal

Output :
Code :
<div class="modal" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
                                          
    <!-- Modal Header -->
    <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
    </div>
                                            
    <!-- Modal body -->
    <div class="modal-body">
    Modal body..
    </div>
                                            
    <!-- Modal footer -->
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    </div>
                                            
    </div>
</div>
</div>

Bootstrap References used in this Session

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>