What is Bootstrap

  • Framework
  • Class based
  • Flex based grid

Author Notes

Bootstrap is a framework, which means a way to write your code. If you write code the way the frameworks asks you to write code, then it will give you some additional functionality.

In Bootstrap’s case, almost all of the features are added by adding a series of classes to your code. When you add these classes, bootstrap will give you features like a column grid, dropdowns, navigation menus and many others.

One of the main reason people use Bootstrap is because it gives you an easy to use and well tested grid that helps you layout your sites with responsive features. Bootstrap is known as a mobile first framework, which means that it assumes you’re designing for mobile devices, but it allows you built functionality from there.

Installing Bootstrap

Author Notes

You can install Bootstrap in one of four ways. The first is to simply download the pre-compiled Bootstrap CSS and JavaScript files. That works well if you need to install a copy of bootstrap that will work even without an internet connection.

Another way is to use CDNs. A CDN is a content delivery network, which means a place that hosts common libraries like Bootstrap. When someone visits a site that uses a CDN link, their browser will check it’s cache or memory to see if the visitor has been to a similar site that’s also using the same link. If that’s the case, then the browser will load the cached version of the library. Since it’s already stored in memory, that makes the new site load faster since the browser won’t have to request the file.

You can also download the source files. This way, you download not just the css and javascript but all of the files that the developers used to create bootstrap, which includes everything including the original sass files and the documentation. You probably only want to do this if you want to contribute to the project or customize bootstrap. We wont be talking about this option in this course.

For this class, we’ll use the CDN version of bootstrap. I’ve created a special GIST with the code you need to get started with the Bootstrap framework.

Typography

  • Reboot.css styles
  • border-box sizing
  • Native fonts
  • Inherit

Author Notes

There is a special portion at the beginning of the bootstrap styles called reboot.css. It normalizes styles so that they look similar in different devices and browsers. Unlike most other normalizing css templates, it’s a bit opinionated.

In CSS, vertical margins can collapse and that makes it confusing to calculate the proper spacing in between different elements. To avoid this, bootstrap adds margin only at the bottom of elements.

Bootstrap content uses the inherit css parameter whenever possible. This is important when you write your own css in addition to the bootstrap css because you won’t have to work as hard to override styles.

Another default that is set in bootstrap is that box-sizing, which makes it easier to calculate the width of elements is by default turned to

Bootstrap uses Native Font Stacks. That means that the default font in bootstrap isn’t set to Helvetica, but it tries to use whatever the current platform defines as the default sans-serif font. For example, on current macs, that would be San Francisco. That yields a smaller css file and again, makes things look great on different devices.

Bootstrap has elements that match headlines, style lead paragraphs and take care of common page patterns. This gives you a great looking stylesheet to begin your own designs.

Let’s take a look at a document that uses bootstrap with some basic HTML code. First, you’ll notice that Bootstrap uses sans-serif fonts, which is definitely different than the serif defaults in your browser and it also redefines styles for things like emphasis and strong as well as other HTML content.

Headings like H1-H6 look great and if you know your typography, you might notice that things seem a bit tighter than normal. That’s because bootstrap’s approach is to remove the margin from the top of elements. So headings and paragraphs have the margin at the top and bottom removed.

1
2
3
4
5
6
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

There are also four display styles for more dramatic typography that look great.

1
2
3
4
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

You can specify that certain paragraphs receive a lead style with the lead class.

1
2
3
<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Bootstrap 4

Text Utilities

Author Notes

Bootstrap provides several utility classes that can help you take care of common typography needs, so let’s take a look at what they are and try them out.

Alignment Utilities


  • text-justify

  • text-nowrap

  • text(-XX)-POS



    XX: sm >576px
    md >768px
    lg >992px
    xl >1200px



    POS: left  
    center  
    right


Author Notes

text-justify lets you do full justification within the browser, so that the edges of text align instead of being ragged.

If you need to turn off wrapping for some content, you can use text-nowrap. That can be useful if you have a long line of text that’s just going to be copied, but you don’t need to display the whole thing.

One of textual utility classes lets you control the alignment of your content. What’s really cool is that the alignment can change based on the width of the browser or viewport. The formula looks like this.

Lists

  • list-unstyled no bullets
  • Inline Lists
    • list-inline on UL
    • list-inline-item on each LI

Author Notes

There’s a couple of styles that will take care of things that we often do with lists. First is getting rid of those pesky bullets, you can do that with the list-unstyled class. However, this only works on the first level of the list elements.

Next you can build lists that appear side by side like a menu or perhaps your own version of a breadcrumb using a combination of two links. list-inline goes on the UL element list-inline-item goes on each LI in the list.

Colors

Text Colors


  • text-COLOR for text



    primary
    secondary
    success
    danger

    warning
    info
    light
    dark


  • Use for links


Author Notes

  1. You use the word text, and then one of the color keywords like: primary, success, info, warning, danger, white or muted and that will turn the text that color.

1.You can use the same class names for links.

Background Colors


  • bg-COLOR for backgrounds



    primary
    secondary
    success
    danger

    warning
    info
    light
    dark
    white


Author Notes

  1. Another way you can use them is to color the background of elements and of course, there are classes for that.

Images

Basic Images

  • img-fluid responsive images
  • rounded, rounded-DIR round edges
    DIR: top right bottom left
    circle rounded-0
  • img-thumbnail rounded 1px border

Author Notes

One of the most useful image classes is the img-fluid class. If you add that to an image, the image becomes responsive, which means a max-width attribute of 100% and a height of auto.

If you want rounded edges, you can use the word rounded or add a direction to the word, top, right, bottom, left, which should be self explanatory or circle, which makes the image look like a circle and rounded-0, which gets rid of any roundness the picture currently had.

There is an additional style that adds a 1 px rounded edge around the image called img-thumbnail.

Aligning Images

  • float-left or float-right
  • text-center center inline
  • mx-auto center block

Author Notes

If you need to align images, you can use the float-left or float-right class, which will also work for other elements.

Traditionally, images are inline elements, so you should be able to use text-center on the container element.

If the image happens to be a block element, you can use the mx-auto class to center the element.

Layout Grid

Author Notes

One of the main reasons people use bootstrap is to be able to easily layout content that’s responsive. This is the most important thing you should master in bootstrap.

The Grid

  • Responsive 12-column
  • Flexbox Based
    • containers
    • rows/columns

Author Notes

The grid is a responsive 12-column system for creating just about any layout you can think of.

It uses a technology called flexbox that makes it easier to create complex layouts with minimal code.

In order to work with the grid, you neet to masters three simple concepts.

First is containers, which can be used with or without the grid to align content either to the viewport or to center it around a set of breakpoints.

Next is rows and columns, they work together to allow you to create the layouts. The rows prepare the columns for layout. Columns are both complex and extremely flexible, so we’ll cover them in a separate video. Let’s take a look at containers.

Grid Containers

  • container
  • container-fluid
  • 15px padding
  • Adjusts to breakpoints

    <576px< code="">
    576px
    768px
    992px
    1200px

Author Notes

There are two different types of containers, regular containers which center content and snap to certain grid points.

Or fluid containers, which are always the full width of the viewport, which means the width of the device or browser window.

One of the reasons you use a container is because you get a 15px padding on each side to make sure it works well with backgrounds.

Rows

  • Require Rows
  • Only columns in rows
  • no-gutters deletes gutters

Author Notes

Rows prepare your layout for the grid. They are required in order to use columns. They use negative margins to get rid of the spacing that containers add. That makes sense because if you are going to have columns, you probably want space in between the columns and not at the edges.

You place the content you want inside columns, not rows. the ONLY element that sits inside a row should be columns. Although you can use containers without rows or columns…in order to use columns, you must use rows. Columns won’t work properly without rows.

You can use a special class called .no-gutters to remove spacing between rows…just in case you need some columns with no gutter spacing.

Columns

  • 12 Column Grid
  • col(-BP)(-COL)


    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    COL: 1-12

Author Notes

You can place content in a 12 column grid and control how the content is placed into those rows.

Columns can be set to automatically sized using the col class, they can pass along a size at which they’ll convert to the full width of the viewport.

Adding a breakpoint to a column definition will determine when the column converts from taking the full width of the device or window.

Column Specs

Extra small < 576px Small ≥ 576px Medium ≥768px Large ≥992px Extra large ≥1200px
Prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Author Notes

The breakpoints control when a column switches from a taking up the full width of the viewport to optionally a certain amount of column units.

You can assign different column values at differing breakpoints, so this makes this grid extremely easy to use and control.

Position/Display

Position


  • Position classes


    fixed-top
    fixed-bottom
    sticky-top


  • sticky-top lacks support

Author Notes

Let’s talk about the position property. If you are familiar with CSS, this one works just like the regular CSS position property.

There are three options here, you can use a fixed-top or fixed bottom, which just like with the CSS version removes the content from the flow in the current document and attaches them to the top or bottom of the screen. When you do this, you’ll probably need to adjust your CSS because the content will float on top of other content. Finally, there’s the sticky-top property. That will automatically make certain content stick as it goes past a certain location, but it’s not well supported in browsers, especially microsoft browsers.

Basic Display


  • Mimics CSS

  • d(-BP)-TYP


    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px

    TYP:
    none
    inline
    inline-block
    block

    table
    table-row
    table-cell
    flex
    inline-flex


Author Notes

The display properties mimic what is possible with CSS and opens up Bootstrap to flexbox classes that can help with layouts.

To use a display class, you use the d- and then the type of display property you want to use. block, inline, inline-block or flex. Flex has a ton of options. We’ll cover the basic container in this video and explore it further in the next.

Flex Container


  • Container/item classes

  • d(-BP)(-inline)-flex



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px





Author Notes

In order to lay elements with the display flex property you add classes to either the flex container or the individual elements depending on what you need.

Here’s the basic formula for the main flex container. You can use breakpoint as well as the optional inline option.

Direction


  • flex(-BP)(-DIR)(-reverse)



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    DIR: row
    column



Author Notes

For controlling direction, we can use a keyword in our container that lets us control wether the content appears in columns or rows. By default the content will appear in side by side rows, but you can also specify a column and control that using breakpoints. You can optionally reverse the direction of the items with the reverse option.

Justify


  • justify-content(-BP)-ALG



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    ALG:
    start
    end
    center
    around
    between



Author Notes

Justifying content lets you control the spacing between items. Like other options you can control them with an optional breakpoint. The alignment options are start, which puts the items to the left and extra space to the right. end, which puts the items to the right and the extra space on the left. Center, which is a great way to center content. Around puts the space around and in between options. Between does something similar but makes the edge elements align to the edge. These will make more sense with an example.

Wrap


  • flex(-BP)-WRP(-reverse)



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    WRP:
    wrap
    nowrap



Author Notes

Wrap lets you control wether the elements wrap in relation to the space in their container. There’s two options either wrap the elements or to not wrap the elements. You can also include an extra keyword to reverse the order of the elements.

Vertical Alignment


  • align-content(-BP)-ALG



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    ALG:
    start
    end
    center
    between
    around
    stretch



Author Notes

Vertical alignment does just what you think, controls the alignment of elements vertically. In addition to the breakpoints, the options are to put the elements towards the beginning or the end, center them vertically, put space in between or around and finally stetch the elements to fit the container.

Display Utilities

Margin/Padding


  • PRO(SID)(-BP)-SIZ



    PRO:
    m margin
    p padding



    SID:
    t
    r
    b
    l
    x
    y



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



    SIZ:
    0
    1
    2
    3
    4
    5
    auto


Author Notes

Bootstrap provides a few classes that will let you add margin and padding to different elements. They work just like their CSS counterparts, so this should easily make sense. To activate it, you use a property, then optionally a side. Notice that there is no hyphen between the property and the side like in the other classes.

The sides are just like in HTML top, right, bottom, left. The x option is for right and left and the y option is for top and bottom. You can optionally add a breakpoint like with other spacing parameters and then a size. The sides are in numbers from 1-5. The base size for each of these is based on a variable that is preset at 1 rem so these are mutiples of that. Using the number 1 means a space of .25rem, two is .5rem, three is 1rem, 4 is 1.5rem and 5 is 3 rem.

Visibility


  • d(-BP)-TYP


    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px

    TYP:
    none
    inline
    inline-block
    block

    table
    table-cell
    flex
    inline-flex


Author Notes

Most of the time you’ll want to use the display property. Although we already covered it on the movie on display properties, it’s useful to repeat it again here. It allows you to change the display of an item using breakpoints and either the keyword none or one of the other regular display properties.

Navbars


  • navbar

  • navbar-expand(-BP)



    BP: sm >576px
    md >768px
    lg >992px
    xl >1200px



Author Notes

The navbar is the main component and it can have a number of other elements inside it.

By default, navbars components will stack so we need to add a navbar-expand with optional breakpoints to control when the navbar expands

The simplest component you can use is the navbar-nav, which is our list of links. Just like with navs, you can use the navbar classes with either ULs or with the NAV tag.


  • bg-COLOR for backgrounds



    primary
    secondary
    success
    danger

    warning
    info
    light
    dark
    white


  • navbar-light

  • navbar-dark

Author Notes

You can use bg-color classes to change the color of the background navigation just like with other components if you want to use one of Bootstrap’s defaults…and you can easily customize your color by changing the background-color css property to whatever you want.

To control the color of the text, you can use navbar-light if your background color is light

Or you can use navbar-inverse if your background color is dark

<nav class="navbar navbar-light" style="background-color: #C4226F;">
<nav class="navbar navbar-dark" style="background-color: #EEC856;">

  • navbar-nav parent
    • nav-item, nav-link
    • active

Author Notes

Just like with navs, we have a few classes to control how links look. You need a navitem on the LI if your using lists or in the anchor tag if your using the NAV tag. You use a nav-link just like with navs to identify the link You can also add an active class to show which page you’re on.

Slide Pages

Assignments

Class Links

Code Editors

Online Resources

Lynda.com Tutorials