Bootstrap

What is bootstrap?

  • Bootstrap is a free and open-source front-end framework for developing responsive, mobile-first projects on the web.
  • mobile-first-approach means that your website will look great on any device, no matter how small or large the screen. the desgin is optimized for mobile devices first and then scaled to fit the screen.

containers

  • containers are most basic layout elements in Bootstrap and are required when using any of the other boot strap components.
  • Two types of containers are available:
    • fluid container : the container is the full width of the screen.
    • fixed containers : the container is fixed width and the content is centered and changes on break points.
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
  </div>
</div>

Container Basic

  • Each container has a class of container.
  • class row is used to create a row of columns.
  • within row class col- is used to create a columns
  • class col- can be assigned a md lg sm xs as breakpoints
  • or add a number to the class to create a number of columns

align-items and justify-content

  • align-items-center : aligns the items vertically in the middle of the container.
  • justify-content-start: move the content to the left side of the container.
  • align-items-start: aligns the items vertically at the top of the container.
  • justify-content-end: move the content to the right side of the container.
<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
  </div>

utilities

  • change background-color of the container to red, add the class bg-danger
  • change the text to white, add the class text-white
  • change the height of the container to 200px, add the class h-200
  • change thw width of the container to 200px, add the class w-200
  • center text in the container, add the class text-center

height and width

  • you set the height and width of the container with the class h- and w-
  • set the height based on viewport height, add the class h-vh-
  • set the width based on viewport width, add the class w-vw-
  • set maxium height and width, add the class h-max- and w-max-
<div class="container h-vh-50 w-vw-50">
  <div class="row align-items-center">
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
    <div class="col-md-6">
      <p>col-md-6</p>
    </div>
  </div>

padding and margin

  • padding is used to add space around its content use the class p-
  • margin is sued to add space around the container use the class m-
  • top margin, add the class mt-
  • bottom margin, add the class mb-
  • left margin, add the class ml-
  • x axis margin, add the class mx-
  • y axis margin, add the class my-

Radius

  • add the class rounded- to the container
  • set the radius size of the container by giving a percentage value like rounded-50%

challenge