Hackerthink logo

THE MOST POPULAR SITE FOR DEVELOPERS.

Bootstrap Introduction

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

History

Bootstrap by Twitter ‘s Mark Otto and Jacob Thornton development. Bootstrap is an open source product released on GitHub in August 2011.

Why use Bootstrap?

  • Mobile device first : Since Bootstrap 3, the framework includes mobile device first styles throughout the library.
  • Browser support : All major browsers support Bootstrap.

    Internet Explorer Firefox Opera Google Chrome Safari

  • Easy to use : As long as you have basic knowledge of HTML and CSS, you can start learning Bootstrap.
  • Responsive design : Bootstrap’s responsive CSS can adapt to desktops, tablets and mobile phones. For more information about responsive design, see Bootstrap responsive design .

    Responsive design

  • It provides a simple and unified solution for developers to create interfaces.
  • It contains powerful built-in components and is easy to customize.
  • It also provides web-based customization.
  • It is open source.

Contents of the Bootstrap package

  • Basic structure : Bootstrap provides a basic structure with grid system, link style, and background. This will be explained in detail in the basic structure of Bootstrap .
  • CSS : Bootstrap comes with the following features: global CSS settings, definition of basic HTML element styles, extensible classes, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.
  • Components : Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, etc. This will be the layout of the components explained in detail section.
  • JavaScript plug-ins : Bootstrap includes more than a dozen custom jQuery plug-ins. You can include all the plug-ins directly, or you can include them one by one. This will be explained in detail in the Bootstrap plugin section.
  • Customization : You can customize Bootstrap components, LESS variables and jQuery plug-ins to get your own version.

Online examples

The Bootstrap tutorial on this site contains hundreds of examples.

You can use our online editor to edit the code online and click the run button to view the result.

Example

<div class="container">
  <div class="jumbotron">
    <h1>My first Bootstrap page</h1>
    <p>Reset the window size to see the responsive effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Frst Column</h3>
      <p>What I Learned is not only Technology, but also a dream!</p>
      <p>No matter how awesome your dream is,youcan't resist yourstupid persistence!</p>
    </div>
    <div class="col-sm-4">
      <h3>Second Column</h3>
      <p>What I Learned is not only Technology, but also a dream!</p>
      <p>No matter how awesome your dream is,youcan't resist yourstupid persistence!</p>
    </div>
    <div class="col-sm-4">
      <h3>Third Column</h3>        
      <p>What I Learned is not only Technology, but also a dream!</p>
      <p>No matter how awesome your dream is,youcan't resist yourstupid persistence!</p>
    </div>
  </div>
</div>

More examples

Example

<div class = " table-responsive "> 
  <table class = " table table-striped table-bordered "> 
    <thead> 
      <tr> 
        <th> # </th> 
        <th> Name </th> 
        <th> Street </th> 
      </tr> 
    </thead> 
    <tbody>
      <tr> 
        <td> 1 </td> 
        <td> Anna Awesome </td> 
        <td> Broome Street </td> 
      </tr> 
      <tr> 
        <td> 2 </td> 
        <td> Debbie Dallas </td> 
        <td> Houston Street </td> 
      </tr> 
      <tr> 
        <td> 3 </td> 
        <td> John Doe </td> 
        <td> Madison Street </td> 
      </tr> 
    </tbody> 
  </table> 
</div>