Up-and-Runing with Bootstrap 3

Open a Code Editor

You'll need a code editor to assemble the following code snippets.

Saving Your Work...
If you choose Thimble, note that you will need to create and account or sign in if you wish to save the site you create.

Type	Name	Notes
	Thimble (Mozilla)	Sign in required to save your site
	Atom (GitHub)	Recommended packages: + Atom Beautify + Emmet + Atom Bootstrap-3

Create an HTML Page

Begin with the shell of an HTML5 page, with includes of both Bootstrap 3.3.7 and the latest version of jQuery. I've also inlcuded a link to the Font Awesome Web icons library. Bootstrap also offers their own Glyphicons web fonts.

<!DOCTYPE html>
<html lang="en">
   <head>

      <!-- Metadata for the Webpage -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Title</title>

      <!-- Bootstrap CSS files-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

      <!-- jQuery UI CSS (optional) -->
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

      <!-- Google Open Sans web font -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700" rel="stylesheet">

      <!-- Font Awesome Web Icons -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

   </head>
   <body>


      <!-- [ This is where your body content will go... ] -->


      <!-- jQuery Javascript Library (required by Bootstrap) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <!-- jQuery UI Library (optional) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

      <!-- Bootstrap Library -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

   </body>
</html>

Add a Container (wrapper)

The 12-column Bootstrap grid is typically built by stacking .rows inside of a single wrapping .container. You may nest containers as well for additional padding.

Choose a container width:

	`.container`	Centered, padding left and right
	`.container-fluid`	Full-width, no padding

<div class="container">
   <!-- Your rows go here -->
</div>

OR

<div class="container-fluid">
   <!-- Your rows go here -->
</div>

Add a Jumbotron

Let's add a Jumbotron to the top of the page. To remove its rounded corners and force the jumbotron to take up the full width of the screen, add it before the main .container div.

               <div class="jumbotron">
               <div class="container">
               <h1>Hello, world!</h1>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
               <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
               </div>
               </div>

Add a Navbar

Let's add a navbar to the very top of the page. To shift the navbar darker, add the .navbar-inverse class.

<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
     <li><a href="#">Link</a></li>
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li role="separator" class="divider"></li>
         <li><a href="#">Separated link</a></li>
         <li role="separator" class="divider"></li>
         <li><a href="#">One more separated link</a></li>
      </ul>
     </li>
   </ul>
   <form class="navbar-form navbar-left">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
     </div>
     <button type="submit" class="btn btn-default">Submit</button>
   </form>
   <ul class="nav navbar-nav navbar-right">
     <li><a href="#">Link</a></li>
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li role="separator" class="divider"></li>
         <li><a href="#">Separated link</a></li>
      </ul>
     </li>
   </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Add Rows

To add content in Bootstrap, you'll need to use the 12-column Bootstrap grid. Let's add a row with 4 columns (for a large monitor), 2 columns (for a medium device), and 1 column (for a small device) inside the container div.

<div class="row">

   <div class="col-sm-12 col-md-6 col-lg-3">
      FIRST COLUMN--Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </div>

   <div class="col-sm-12 col-md-6 col-lg-3">
      SECOND COLUMN--Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </div>

   <div class="col-sm-12 col-md-6 col-lg-3">
      THIRD COLUMN--Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </div>

   <div class="col-sm-12 col-md-6 col-lg-3">
      FOURTH COLUMN--Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </div>

</div>

Add UI Elements

Bootstrap UI elements can be found under the CSS, Components, and Javascript tabs on the Bootstrap documentation. (You can find my Bootstrap-builder tools in our Library Guides Handbook under Features.)

<form>
   <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
   </div>
   <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
   </div>
   <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">help text here.</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> Check me out
      </label>
   </div>

   <button type="submit" class="btn btn-default">Submit</button>

</form>

An HTML + CSS + JS Front-end Framework