Bootstrap Part 2

Tue, Mar 13, 2018
Readings
Bootstrap Website

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>

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>