Bootstrap Part 2

Tue, Apr 02, 2019
Readings
Bootstrap Website
Downloads
Media files for in-class exercise.

Margin Utilies

Bootstrap comes with a few spacing classes to add either padding or margin. It works like this:

[margin or padding][the side][-number]
  • m = margin
  • p = padding

Then you pair up with a side:

  • t = top
  • l = left
  • b = bottom
  • r = right

And finally you add a number from 0 to 5, or the word “auto.”

  • mt-3 will add 3 spaces of margin top.
  • pb-2 will add 2 spaces of padding bottom.
  • mr-0 will remove any margin on the right.

Further, there are two shortcut classes for adding padding or margin to both left and right, or top and bottom at the same time.

  • x = left and right
  • y = top and bottom
  • blank = all sides

So, following the same syntax:

  • mx-5 will add 5 spaces to both the left and right at the same time.
  • py-2 will add 2 spaces of padding to the top and bottom.
  • p-3 will make 3 spaces of padding around all sides.
  • mx-auto will make auto margins on the left and right.

Images

There are several classes for optimzing images. The one you likely want to use all the time is img-fluid which will make images responsive. With this class, images will always shrink down to smaller viewport sizes, but they will never expand larger than their native size (meaning, if an image’s pixes is 600x600, it will never stretch larger than this, but it can shrink).

<img src="..." alt="..." class="img-fluid">

There is another class for making images block elements called d-block. This will make images stack on top of each other, and allow you to use margin utilities on it.

<img src="..." alt="..." class="img-fluid d-block">

For circle images, or images with rounded corners, use the following utility classes.

<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded">

Screen Readers

To hide content visually, but still allow it to be read by screen readers, simply add the .sr-only class to any tag. (SR stands for Screen Reader.)

There is also a .sr-only-focusable which allows users to tab to the element when using a screen reader.

Embed utilies

When embeding a piece of multimedia content from another website, like a video from Vimeo, you should use this special embed utility to allow the video to resize automatically for mobile. You need to select the aspect ratio of your embed from the options below.

Note: Most of the time, videos will be in 16:9 ratio.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Font classes

Bootstrap comes with several font classes for adjusting the appearance of text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

There is also a utility for truncating text when there isn’t enough room. This only works when the parent tag is either block or inline-block, which you can set with the d-block or d-inline-block classes.

<!-- Block level -->
<span class="d-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Hiding Text for Background Image

This is a helpful utility for hiding text when you want to display a background image behind the text. Situations that typically require this are logos, when you want to use an image for your logo, but wish to retain the semantic benefits of having the name in HTML.

<h1 class="text-hide" style="background-image: url('nyt-logo.svg');">New York Times</h1>

Components

There are a number of components that require JavaScript in order to use. These are things like photo carousels, or tooltips.

Cards

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

 

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-secondary">Go somewhere</a>
  </div>
</div>

Photo Carousels

Example:

 

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

If you want captions, you can add them to the carousel-item tag like so:

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

To make a drop down, just add the following code:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p>
  <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>


<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Some content here in the pop-up.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-secondary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tooltips

Here is how you would make a tooltip.

 

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

<!-- At the bottom of your webpage, include the following script -->

<script src="/js/jquery-3.2.1.min.js"></script>
<script>
jQuery(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

This is a really helpful utility for making navigational bars. It has a lot of features built-in, namely, a mobile version for doing drop-downs.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Brank</a>

  <!-- hamburger menu button that appears on mobile -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

In-class Exercise

For the in-class exercise, we will recreate a sample webpage in Bootstrap.

Vietnam example

First, download the compiled Bootstrap files so that you have a css and js folder.

Here is the starter HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  
  <title>Example Project</title>
  
  <style>
  
    html,body{
      overflow-x: hidden;
    }
  
  </style>
</head>
<body>
    
  <header>
    <h1>Dirty Business</h1>
    <p>Just thirty kilometers south of Hanoi, Vietnam, Minh Khai's landscape has shifted from urban bustle to an agrarian-industrial hybrid.</p>
    
    <video id="opening-video" muted autoplay playsinline loop preload>
      <source src="assets/vietnam-workers.mp4" type="video/mp4">
    </video>  
  </header>
    

    
  
  <div>
    <div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae pulvinar ex, quis lacinia mi. Donec eros massa, vestibulum sit amet mattis vitae, ornare eu purus. Vivamus vehicula ullamcorper turpis, vel finibus nunc bibendum quis. Praesent velit neque, sagittis eu lacus quis, interdum fringilla enim. Duis volutpat vitae sem nec pulvinar. Maecenas sit amet dolor magna. Proin purus elit, convallis ac ipsum vel, tincidunt rhoncus urna. Mauris vitae tortor ut arcu imperdiet congue. Sed euismod, nibh et congue elementum, risus mi faucibus dui, nec efficitur libero lectus at nunc. Quisque at placerat velit. Integer libero nunc, convallis a efficitur interdum, fermentum eu eros. Sed sagittis mi at erat dapibus consequat. Curabitur euismod massa nec nulla egestas, non mollis justo faucibus. Maecenas faucibus et erat et sollicitudin.</p>
        <hr>
        <p>Vestibulum id vulputate arcu, ac gravida erat. Aliquam in volutpat tellus, id lobortis odio. Proin ornare, velit ut consectetur bibendum, erat justo luctus tellus, quis iaculis lorem ipsum a risus. Nulla facilisi. Maecenas dapibus, nisl et porttitor condimentum, dui augue ultrices tellus, quis sagittis nisl diam ac metus.</p>
        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum non nisl id dolor condimentum egestas. Sed et cursus tellus. Morbi mollis finibus velit vel convallis. Quisque metus quam, ultricies pretium viverra nec, lacinia quis arcu. Nunc dignissim ac turpis sagittis eleifend.</p>
      </div>
    </div>  
  </div>
    

  <div>
    <video id="second-video" muted autoplay playsinline loop preload>
      <source src="assets/man-working-plastic.mp4" type="video/mp4">
    </video>
  </div> 
    

  <div>
    <div>
      <div>
        <p>Curabitur at vehicula mi. Morbi eget arcu pharetra, dapibus mauris quis, elementum purus. Praesent pharetra nibh non risus convallis, eget volutpat dui porttitor. Nunc in hendrerit lacus. Mauris aliquet, libero in hendrerit venenatis, nulla dolor facilisis lacus, a dignissim justo nulla viverra tellus. Etiam ut neque at magna tincidunt sagittis. Vestibulum lobortis commodo enim, eget tempus nisl venenatis sed. Suspendisse potenti. Vivamus sodales eget leo et convallis. Nullam posuere nisl lorem, at pharetra eros commodo iaculis.</p>
      </div>
    </div>
  </div>
   

  <script src="js/jquery-3.3.1.slim.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>