Content

• Bootstrap Collapse
• Bootstrap Navbar
• Bootstrap Forms
• Bootstrap Carousel
• Bootstrap Modal
• Bootstrap Tooltip

Bootstrap Collapse

Collapsibles are useful when you want to hide and show large amount of content

Example : Bootstrap Collapse

Output :

Code :

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Bootstrap Navbar

Example : Bootstrap Navbar

Code :

<nav class="navbar navbar-expand-md navbar-light" style="border: 2px solid black;">
    <a class="navbar-brand" href="#"><img src="https://revolutionit.in/img/revolution.jpg" style="height:30px" alt=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" >
        <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" data-toggle="collapse" data-target=".navbar-collapse.show" href="Home.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="About.html">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="Contact.html">Contact</a>
        </li>
        </ul>
    </div>
</nav>

Bootstrap Forms

Form controls automatically receive some global styling with Bootstrap

Example:Bootstrap Froms

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="pswd">
    </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 btn-primary">Submit</button>
</form>
  

Bootstrap Carousel

Bootstrap Carousel is used to implement slider

Example:Bootstrap Carousel

Output:

Bootstrap Modal

The Modal component is a dialog box/popup window that is displayed on top of the current page

Example:Bootstrap Modal

Output :

Code:

<button  type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>
  
<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4> class="modal-title">Login</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <form>
            <div class="form-group">
                <label> for="email">Email address:</label>
                <input type="email" class="form-control" placeholder="Enter email" id="email">
            </div>
            <div class="form-group">
                <label> for="pwd">Password:</label>
                <input type="password" class="form-control" placeholder="Enter password" id="pwd">
            </div>
            <div class="form-group form-check">
                <label> class="form-check-label">
                <input class="form-check-input" type="checkbox"> Remember me
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button> type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
</div>

Bootstrap Tooltip

The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element

Example : Bootstrap Tooltip

Output:

The data-placement attribute specifies the tooltip position.

Code:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a>

Note :Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

The following code will enable all tooltips in the document :

<script>
  $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
      });
</script>