The JS Bootstrap framework is a framework that provides tools for web design.

  • Bootstrap Buttons
  • Bootstrap Image Utils.
  • Bootstrap Dropdown Menus


Bootstrap Buttons


Bootstrap provides additional functionality to HTML buttons. These can be implemented in three ways:

    <button type="button" class="btn btn-ARGS:outline-ARGS:primary">TEXT </button>
    <input type="button" class="btn btn-ARGS:outline-ARGS:primary" value="TEXT">
    <a href="#" class="btn btn-ARGS:outline-ARGS:primary" role="button">TEXT </a>



Yields the results:

button .btn-success


Bootstrap Images


Bootstrap provides additional formatting options for images.

    <img src="../images/image.jpg" alt="NAME" class="ARGS: rounded/img-fluid/img-thumbnail/float">

In the below image, a mock profile page was made, with the profile picture being an image inside a bootstrap grid element with class=”rounded” applied.



Bootstrap Dropdown Menus


Bootstrap can create interactive dropdown menus from list elements. Multiple arguments exist for structuring the dropdown menu.

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Button Title
      </button>
      <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Header 1</h6></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Element 1</a></li>
        <li><a class="dropdown-item disabled" href="#">Element 2 (Disabled)</a></li>
      </ul>
    </div>


Yields the result:


-gonkgonk

<
Previous Post
Bootstrap Typography, Tables, Forms - WIP
>
Next Post
Bootstrap Button Groups, Input Groups, Navbars, Pagination, Badges