A First Example

Contact Us or call 1-877-932-8228
A First Example

A First Example

Open TheBootstrapFramework/Demos/index.html both in a browser and in a file editor to check out the code. Notice the difference between viewing the page from a desktop browser:

Bootstrap - desktop

and viewing the page from a phone, or with a desktop browser at a narrow width:

Bootstrap - phone

In general, elements that are horizontal (positioned side-by-side) on the desktop view are vertical (stacked) in the mobile view. Be sure to investigate how the layout changes as you drag the width of your browser wider and narrower, or view the page from a table or mobile device. Let's review the code.

Code Sample:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Bootstrap Examples</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/demo.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <div class="container">

      <div class="page-header">
        <h1>Bootstrap Example</h1>
        <p class="lead">Basic grid layouts and select Bootstrap component elements.</p>

      <h3>Three equal columns</h3>
      <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>

      <h3>Three unequal columns</h3>
      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
      <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>

      <h3>Two columns</h3>
      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>


      <h3>Two columns with offset</h3>
      <p>Two columns with the first column offset by 4.</p>
      <div class="row">
        <div class="col-md-4 col-md-offset-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>


      <h3>Nav: Pills</h3>
      <p>Pill navigation, justified to fill the screen on desktops, stacking on mobile.</p>
      <ul class="nav nav-pills nav-justified">
        <li role="presentation" class="active"><a href="#">Link 1</a></li>
        <li role="presentation"><a href="#">Link 2</a></li>
        <li role="presentation"><a href="#">Link 3</a></li>


    </div> <!-- /container -->
  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="js/ie10-viewport-bug-workaround.js"></script>

The <head> of index.html file includes a viewport tag and a link to the css/bootstrap.min.css we downloaded from Bootstrap; note that this CSS file is minified (stripped of whitespace, making for a smaller file) to improve performance with a quicker download.

We also link to a custom CSS file - css/demo.css - that we wrote ourselves. This file is not part of Bootstrap; rather, we added a few lines of CSS to add background color and borders to grid elements, to make it easier to see what's going on.

A conditional statement (<!--[if lt IE 9]) targets older Internet Explorer browsers, including two JavaScript files to improve those older browsers' handling of HTML5 tags.

Near the bottom of the page we include three JavaScript files via <script> tags: a link to jQuery (in this case via a content deliver network, or CDN); a link to Bootstrap's core JavaScript file, bootstrap.min.js; and a link to a Bootstrap JavaScript file (ie10-viewport-bug-workaround.js) that fixes an Internet Explorer bug. This last file (ie10-viewport-bug-workaround.js) doesn't download with the core Bootstrap files; we downloaded it directly from the Bootstrap GitHub site, and recommend including it in production projects to address a known issue with some Windows browsers and Bootstrap.

Inside the <body> of our example file, we present four examples of using the grid and one example of using a component. Note that the outermost element is a <div> tag with class container: this gives us the proper alignment and padding for the contained elements.

The first grid example - three equal columns - starts on line 36: a <div> of class row contains three <div>s each of class col-md-4. For desktop-width (or larger) viewports, these three <div>s display as equal-width, side-by-side elements; each takes up one third of the width of the container. For smaller viewports - an Android or iPhone, say, or a desktop browser dragged narrower - these elements appear stacked vertically.

In the second grid example (starting on line 44), on a desktop-or-larger viewport, we see three unequal columns, with the middle element taking up 50% of the allotted space and the two elements on either side each taking up 25% of the space. Note that the middle <div> element has a class of col-md-6 and the first and last <div>s have class col-md-3. As Bootstrap's grid works from a 12-column system, the "6" class gives that <div> half of the width, and the "3" class gives those two <div>s one quarter of the width. Note that, for smaller viewports, the elements again stack vertically, with each element having equal (100%) width.

The third grid example, starting on line 52, shows two columns: the first spans two thirds of the width (because of the col-md-8 class, "8" being two thirds of "12") and the second spans one third of the width (because of the col-md-4 class). Again, on smaller viewports, the elements stack vertically.

The fourth grid example, which starts on line 61, shows the use of an offset: we have two <div> elements, each with class col-md-4, but the first <div> also gets a class of col-md-offset-4. This offset class pushes the <div> right by the amount indicated (in this case, "4"), so that the two elements each span one third of the width, with the first one pushed right by one third. Notice that the offset doesn't apply for smaller viewports: this fourth example, when viewed on a narrower browser or on a tablet or mobile device, presents the two <div>s stacked vertically.

Finally, on line 70, we show an example of the "pills" navigation element we discussed above: three buttons span the width of the allotted space on larger viewports, while smaller-sized viewports see the three buttons stacked vertically.