BOOTSTRAP

Posted on by

What is bootstrap?

Bootstrap is front end framework for web development. It includes HTML and CSS designed templates and optional javascript plugins. It is also used to create responsive designs.

what are responsive designs?

It is all about creating websites which adjust themselves automatically depending on the device.

Why to use bootstrap?

It is compatible, easy to use, creates responsive designs.

Features:

  • Bootstrap grid systems: It is responsive and columns will arrange automatically.
  • xs- for phones – screens less than 768px wide
  • sm- for tablets – screens equal to or greater than 768px wide
  • md- for small laptops – screens equal to or greater than 992px wide
  • lg- for laptops and desktops – screens equal to or greater than 1200px wide

structure of grid:

<div class=”row”>
  <div class=”col-*-*”></div>
  <div class=”col-*-*”></div>
</div>
<div class=”row”>
  <div class=”col-*-*”></div>
  <div class=”col-*-*”></div>
  <div class=”col-*-*”></div>
</div>
<div class=”row”>
  …
</div>

Bootstrap Containers: Bootstrap requires containers to pad the site contents inside them. There are 2 types of containers .

  1. Containers: it is responsive fixed width container.
  2. Container-fluid: it creates the full width of the container that span the entire width of the container.

Bootstrap images:

Bootstrap buttongroups:

Use a “<div>” element with class .”btn-group” to create a button group

Bootstrap dropdowns

The dropdown class is used to indicate a dropdown menu. Use the dropdown-menu class to actually build the dropdown menu. To open the dropdown menu, use a button or a link with a class of dropdown-toggle and data-toggle=”dropdown”.

The dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of dropdown.togglw and the data-toggle=”dropdown” attribute.

The caret class creates a caret arrow icon (v), which indicates that the button is a dropdown.

Add the dropdown-mennu class to a <ul> element to actually build the dropdown menu.

Bootstrap Collapse:

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

The collapse class indicates a collapsible element. this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the <date-toggle=”collapse” >attribute to an <a> or a <button> element. Then add the <data-target=”#id”> attribute to connect the button with the collapsible content (<div id=”demo”>).