Introduction to Bootstrap

What is Bootstrap?

Bootstrap is a front-end framework for quickly developing web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

History

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open-source product on GitHub in August 2011.

Why use Bootstrap?

• Mobile-first: Starting from Bootstrap 3, the framework includes mobile-first styles throughout the library.
• Browser support: Bootstrap is supported by all major browsers.
• Easy to get started: With just a basic knowledge of HTML and CSS, you can start learning Bootstrap.
• Responsive design: Bootstrap's responsive CSS adapts to desktop, tablet, and mobile. More details on responsive design can be found in Bootstrap Responsive Design.
• It provides a clean and uniform solution for creating interfaces.
• It includes powerful built-in components that are easy to customize.
• It offers web-based customization.
• It is open-source.

Contents of the Bootstrap Package

• Basic structure: Bootstrap provides a basic structure with a grid system, link styles, and background. This will be detailed in the Bootstrap Basic Structure section.
• CSS: Bootstrap includes global CSS settings, basic HTML element styling, extensible classes, and an advanced grid system. This will be detailed in the Bootstrap CSS section.
• Components: Bootstrap includes over a dozen reusable components for creating images, dropdown menus, navigation, alert boxes, pop-ups, and more. This will be detailed in the Layout Components section.
• JavaScript plugins: Bootstrap includes over a dozen custom jQuery plugins. You can include all plugins or each one individually. This will be detailed in the Bootstrap Plugins section.
• Customization: You can customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version.

Online Examples

This Bootstrap tutorial site includes hundreds of examples.

You can edit the code online using our online editor and click the run button to see the results.

Bootstrap Example

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize the window to see the responsive effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Not just learning technology, but also dreams!</p>
      <p>No matter how great the dream, it can't withstand your persistent foolishness!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Not just learning technology, but also dreams!</p>
      <p>No matter how great the dream, it can't withstand your persistent foolishness!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Not just learning technology, but also dreams!</p>
      <p>No matter how great the dream, it can't withstand your persistent foolishness!</p>
    </div>
  </div>
</div>

More Examples

Bootstrap Example 2

<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>

Click the "Try it" button to see how it works.