Week 12: Bootstrap

Bootstrap References

Setup and Installion

Bootstrap is a Framework, largely CSS, with a bit of Javascript thrown in.
We need to include their CSS file in the head of our HTML and then the 3 JavaScript links at the bottom of the body.
We can download them and link to them locally or use the CDN (Content Delivery Network) versions.
Here are the links for the CDN versions.

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
    <!-- your CSS file link goes HERE -->
</head>
<body>
    <!-- your content goes here -->
    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <!-- your JavaScript file(s) go here -->
</body>

once you have the bootstrap CSS added to your HTML files then you can start to use the CSS class names that Bootstrap provides.
Your own CSS file goes after the Bootstrap one so that you can override any styles you want.

jQuery and Non-jQuery

jQuery is required for Bootstrap for a handfull of it's compontents that have functionality.
However, jQuery is a library that has been falling out of favour for years.
There is a non-jQuery version of Bootstrap's JavaScript that you can use instead.
Bootstrap Native v4

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
    <!-- your CSS file link goes HERE -->
    
    <!-- add this polyfill in the head to handle IE versions 9 to 11 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/polyfill.min.js"> </script>
</head>
<body>
    <!-- your content goes here -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.15/bootstrap-native-v4.min.js"></script>
    <!-- your script goes here -->   
</body>

Then use this reference for the components.

Breakpoints for Media Queries

Bootstrap comes with a series of Media Queries to change the layout at certain widths.

xs  <576px  eXtra Small
sm  ≥576px  SMall
md  ≥768px  MeDium
lg  ≥992px  LarGe
xl  ≥1200px eXtra Large

Page Layout and Grids

You should have a <div> as a child of the <body> that has the CSS class container
This will center the content and resize it based on the media query breakpoints
There are classes for rows and columns when you want to create a grid / table appearance.
Bootstrap uses Flexbox in it's CSS to create these.

        <div class="row">
            <div class="col-6">
                Column width 6
            </div>
            <div class="col-2-sm col-3-md">
                Width is 2
            </div>
            <div class="col">
                Width is the remainder.
            </div>
        </div>

The class row creates a row which has 12 available spots.
You can add up to 12 divs inside the row with the class col. Bootstrap will size them to fill the 12 spots
If you want the columns to fill exact fractions of the 12 then add a hyphen and a number after col.
If you want the size of the columns to change when your screen is at different media query breakpoints then you can add -xs, -sm, -md, -lg, or -xl after col and before the number.
Grid reference

Text and Utilities

Bootstrap 4 uses the Native font stack

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Common Components

Colour Notes

Many elements in Bootstrap use a standard set of colours.
The class names for the various elements will have a suffix that denotes the colour.
-primary, -secondary, -danger, -info, -success, -warning, -danger, -dark, and -light are the main ones.
These are added to things like buttons and alerts.

Buttons

Buttons are a common element in most websites.
Bootstrap has a set of classes that are added to buttons or anchor elements to make them look consisten
The btn class gives the basic appearance and things like the rounded corners.
The second class, btn-primary provides the colours for the background and font.
We can also add outline version of button class. Just add -outline- in the middle of the colour style.
See the second button below for an example of the outline style.
There are size classes that you can add btn-lg or btn-sm or btn-block which will change the size of the button and its label.
There are also active and disabled modifers we can add. active is a class name. disabled is an attribute that you would add to the button.
Button Reference

<button type="button" class="btn btn-primary">Normal Button</button>
<button type="button" class="btn btn-outline-danger btn-lg">Large Size Button</button>
<a class="btn btn-success">Looks like a Button</a>
<button type="button" class="btn btn-link">Looks like a Link</button>

Alerts

Alerts are a way to display messages on the screen.
They are just a rectangular area with rounded corners, a pale but meaningfully coloured background, and a font colour to match the background.
There are classes for each colour you could need.
Alerts are usually <div> elements but you could use <p> or heading elements instead.
Alert Reference

<div class="alert alert-primary">This is the message</div>
<div class="alert alert-info">This is the message</div>

Navbars and Navs

The navbar is the outercontainer around one or more nav elements
The navbar can have colours added to it with the same class suffixes as the buttons and alerts
The navbar is typically a <nav> element.
There is an optional class fixed-top which will make the navbar stick to the top of the page and fill 100% of the screen width.

<nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Two</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Three</a>
        </li>
    </ul>
</nav>

The nav elements will be styled partly by the navbar-dark or navbar-light class plus an accompanying bg-dark or bg-light on the parent navbar.
To add the links you should use a <ul> with <li> and <a> elements.
The <ul> gets the class navbar-nav.
The <li> elements each get nav-item
The <a> elmenets each get nav-link
Inside the navbar we can also add a branding area where you would display the website name or logo.
This would go inside the <nav> but before the <ul>.
It will style the text larger and bolder than the other navbar elements.

<a class="navbar-brand ">Company Name</a>

If you want the navbar-nav to collapse and become a hamburger menu at smaller sizes then we need two things.
First, a button that controls the toggle. It gets the class navbar-toggler.
The button also needs an attribute data-toggle="collapse" and an attribute data-target="#id".
The data-target needs the id of the second thing, a div with the classes collapse and navbar-collapse.
This <div> would wrap around the <ul>.
This is one of the Bootstrap elements that requires JavaScript.
Navbar Reference

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#uniqueID" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="uniqueID">
    <!-- navbar-nav element goes here -->
</div>

Jumbotrons

A jumbotron is a large hero panel typically placed on the home page to advertise some key feature or information about the website.
Usually created with a <div> with the class jumbotron.
It will create a large rectangular area with a light grey background and rounded corners.
You can put whatever content inside it that you want.
Jumbotron Reference

<div class="jumbotron">
    <h1 class="display-1">Some Important Title</h1>
</div>

Style Overrides

Most of the styles in Bootstrap are tied to a single class.
This allows for easy overriding.
By placing our CSS file AFTER the Bootstrap one, it makes it easier for us to override the styles
All we need to do is have higher specificity.
Sometimes we will use multiple classnames to ensure that our changes have higher specificity
We can use any class names from Bootstrap that we want.
If you are not sure of the class to override, go to the Bootstrap site and look for the component that you want to change. The classes will be visible in the sample code.

.jumbotron{
    background-color: gold;
    color: #333;
}
.navbar-dark.bg-dark .navbar-nav .nav-item{
    /* a special situation for links inside navbar with dark backgrounds */
    color: cornflowerblue;
    font-weight: 700;
}

What to do Before Week 13

TODO

Read through the getting started section of the Bootstrap website
Read through the layout section of the Bootstrap website
Read the Containers, Grid System, and Typography tutorial pages

← Week 11: CSS PreProcessors Week 13: More Bootstrap v4 →

# Week 12: Bootstrap

# Bootstrap References

# Setup and Installion

# jQuery and Non-jQuery

# Breakpoints for Media Queries

# Page Layout and Grids

# Text and Utilities

# Common Components

# Colour Notes

# Buttons

# Alerts

# Navbars and Navs

# Jumbotrons

# Style Overrides

# What to do Before Week 13

Week 12: Bootstrap

Bootstrap References

Setup and Installion

jQuery and Non-jQuery

Breakpoints for Media Queries

Page Layout and Grids

Text and Utilities

Common Components

Colour Notes

Buttons

Alerts

Navbars and Navs

Jumbotrons

Style Overrides

What to do Before Week 13