Bootstrap Snippets

Bootstrap Details

Examples

getBootstrap: examples (view pages sources or download collection)  themes (price of each theme is $49)  w3schools: basicTemplate  examples (Bootstrap 3.4.0)  bootsnipp: examples  tags  startbootstrap: themes&templates colorlibTemplates

B Examples: view online and/or download (free)
B Themes: view online, and if needed buys the theme built or reviewed by Bootstrap’s creators (price of each template is $49)

Bootstrap 3 : bootplyhome  tags  w3schools: examples  templates: w3schools (personal)  w3schools (company)  w3schools (band)  12examples  tutorialrepublic: examplesInOnlineEditor

Some commonly used snippets



Application

Covered is Bootstrap 4. If it is required IE 8-9 support, use Bootstrap 3, the most stable and still supported version of Bootstrap.

Inside the page code have to be included (parts of the Starter template):
(a) inside <head> HTML element:
<!-- Minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
(b) just before  </body> tag:
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

To ensure proper rendering and touch zooming, add in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">

Example Pages Templates

B Examples: view online (right mouse click => View page source) and/or download (free)



Online editors: tutorialspoint (Bootstrap 3)

Starter template

<!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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>StarterTemplate</title>
  </head>
  <body>
    <h1>Starter Template</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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Rails: Install (recommended) Bootstrap in your Rails apps using (a) Gemfile  with the line  gem 'bootstrap', '~> 4.2.1'  and (b) Bundler.

Buttons /1 , 2 , 3 /: flexible and extensible content container
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<button type="button" class="btn btn-primary btn-sm">Small button</button>

btn-: primary secondary success danger warning info light dark link
type=: "button" "submit" "reset"

Cards /1 , 2 , 3 /: flexible and extensible content container

<div class="card text-center">
  <div class="card-header">
    HEADER
  </div>
  <div class="card-body">
    BODI
  </div>
  <div class="card-footer">
    FOOTER
  </div>
</div>

Jumbotrons /1 , 2 , 3 /: big grey box for calling extra attention

<div class="jumbotron"> <!-- occupies a part of horizontal parent's space -->
  <h1 class="display-4">Jumbotron Title</h1>
  <p class="lead">Additional information</p>
  <hr class="my-4">
  <p>HTML, including other Bootstrap elements/classes.</p>
</div>
<div class="jumbotron jumbotron-fluid"> <!-- occupies the entire horizontal parent's space -->
  <h1 class="display-4">Jumbotron Title</h1>
  <p class="lead">Additional information</p>
  <hr class="my-4">
  <p>HTML, including other Bootstrap elements/classes.</p>
</div>

Bootstrap Details