Bootstrap Utilities : “Visibility”

With visibility utilities you have control the visibility, without modifying the display, of elements.

Tagged : / / / / / / / / / / / / / / / /

Bootstrap utilities : “Vertical align”

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Change the alignment of elements with the vertical-alignment utilities.

These are the classes:- .align-baseline, .align-top.align-middle.align-bottom.align-text-bottom, and .align-text-top as needed.

Tagged : / / / / / / / / / / / / / / / / /

Bootstrap:-Component “Navigation bar”

The navbar is one of the prominent features of Bootstrap sites. A navigation bar is a navigation header that is placed at the top of the page. the navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class.

Format of nav bar:-

  • Vertical Navbar by using class=”navbar-nav”.
  • Centered Navbar by using .justify-content-center class to center the navigation bar.
  • Colored Navbar by using any of the .bg-color classes to change the background color of navbar.
  • Brand/Logo by using .navbar-brand class is used to highlight the brand/logo/project name of your page.
  • Collapsing The navbar  To create a collapsible navigation bar, use a button with class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget”.
  • Navbar With Dropdown.
  • Navbar Froms and Buttons Add a <form> element with class=”form-inline” to group inputs and buttons side-by-side.
  • Nevbar Text use .navbar-text class to vertically align any elements inside the navbar that are not links.
  • Fixed Navbar by using .fixed-top or .fixed-bottom class to make the navbar fixed.
  • Sticky navbar use the .sticky-top class to make the navbar fixed/stay at the thop of the page.
Tagged : / / / / / / / / / / / / /

Bootstrap:-Component “Input group”

Input group:-

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.


  • Sizing classes to the .input-group itself and contains within will automatically resize for each element.
  • Checkboxes and radios options within an input group’s addon instead of text.
  • Multiple inputs are only available for input gropus with a single inpute.
  • Multiple addons are supported and can be mixed with checkbox and radio input versions and many more others things as well.
  • Button addons are supported and can be mixed with multiple buttons and input text.
  • Buttons with dropdowns are needed within a single line inpute.
  • Segmented buttons means button and then inside button a dropdown menu and text area there.
  • Customer forms button area and an option area.
  • Customer file input are most important for uploading a file or image etc.
Tagged : / / / / / / / / / / / / / /