Bootstrap-Introduction

Introduction

Bootstrap is the most popular HTML, CSSm and JS framework for developing responsive, mobile first website.

Why Should we use bootstrap:

Bootstrap has a number of features that make it pleasent to use. Lets see some of them:

  1. Responsive : Bootstrap’s most popular feature is responsivenes, Which means website designed using bootstrap optimized to fit the size of the screen you are seeing.
  2. Mobile First: We already know main motive of bootstrap is responsiveness. Part of the code structure of bootstrap is mobile first opposit to desktop first. This means instead of using max-width in the media queries like you would for a site designed for desktop you use min-width.
  3. Browser Friendly: Bootstrap supports all the majot browsers available on the internet.
  4. Easy to use: The best part of bootstrap is you just need the basic knowledge of HTML and css to begin.

Grid System:

The key part of the bootstrap framework is it’s fluid Grid System. The grid system create page layouts by using multiple rows and columns in which you insert your content.

As the device your page is begin viewed on increases in size, the grid system use 12 colums layout system.

Bootstrap Examples:

Grid: uses the 12 pieceBootstrap grid, allowind you to easily adjust your site and letting all elements collapse in mobile mode.

Button: Bootstrap offers seven button styles (success, primary, default, basic, info, warning, danger) and four sizes with classes to bring those styles to fruition.

Icon: With more than 250 glyphs at your disposal in font format, icons need both a base class and and indivual icon class to perform.

Bootstrap Example Code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap use jquery for some functions to perform forexample carousel, dropdown menu etc.

That’s all about bootstrap stay tuned for upcoming tutorials.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.