<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 18pt; font-family: Arial; color: #333333; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">Bootstrap components are made for the specific purpose of copying and pasting them into your HTML document. Just add a component code to the body element and you're done. The component code will take on the exact style and color of code specified in the documentation.</span> </span></p>
<p>&nbsp;</p>
<p><strong style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; white-space: normal;"><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Using Bootstrap components</span></span></strong></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">display headings</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;h1 class="display-1"&gt;Display 1&lt;/h1&gt;
&lt;h1 class="display-2"&gt;Display 2&lt;/h1&gt;
&lt;h1 class="display-3"&gt;Display 3&lt;/h1&gt;
&lt;h1 class="display-4"&gt;Display 4&lt;/h1&gt;</code></pre>
<div class="container">
<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>
</div>
<p><span id="docs-internal-guid-fae04815-7fff-c99d-1fc0-b4e6bf588a3c" style="font-size: 18pt; color: #333333;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">The <code>display</code> heading class attributes are unique to Bootstrap and act as another way to define the headings of a web page. These headings are much larger than the traditional HTML headings and work well for welcome or call-to-action (CTA) text.</span> </span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">buttons</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;a class="btn btn-primary" href=""&gt;Blue button&lt;/a&gt;
&lt;a class="btn btn-secondary" href=""&gt;Gray button&lt;/a&gt;
&lt;a class="btn btn-success" href=""&gt;Green button&lt;/a&gt;
&lt;a class="btn btn-danger" href=""&gt;Red button&lt;/a&gt;
&lt;a class="btn btn-warning" href=""&gt;Yellow button&lt;/a&gt;
&lt;a class="btn btn-info" href=""&gt;Teal button&lt;/a&gt;
&lt;a class="btn btn-light" href=""&gt;Light button&lt;/a&gt;
&lt;a class="btn btn-dark" href=""&gt;Dark button&lt;/a&gt;
</code></pre>
<div class="container"><a class="btn btn-primary mb-2 text-white">Blue button</a>&nbsp;<a class="btn btn-secondary mb-2 text-white">Gray button</a>&nbsp;<a class="btn btn-success mb-2 text-white">Green button</a>&nbsp;<a class="btn btn-danger mb-2 text-white">Red button</a>&nbsp;<a class="btn btn-warning mb-2 text-black">Yellow button</a>&nbsp;<a class="btn btn-info mb-2 text-white">Teal button</a>&nbsp;<a class="btn btn-light mb-2 text-black">Light button</a>&nbsp;<a class="btn btn-dark mb-2 text-white">Dark button</a></div>
<p><span id="docs-internal-guid-e3d901b1-7fff-1ecc-1a10-1b5fbe232914" style="font-size: 18pt; font-family: 'times new roman', times, serif; color: #333333;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Bootstrap buttons are stylized links. There are eight different colors provided. Each button color has a designated class attribute name. The class attribute <code>btn</code> specifies the link a button and the <code>btn-name</code> determines the color of the button.</span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">cards</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="card" style="width: 18rem;"&gt;
	&lt;img src="https://d2gdtie5ivbdow.cloudfront.net/work.jpg" class="card-img-top" alt="work"&gt;
	&lt;div class="card-body"&gt;
		&lt;h5 class="card-title"&gt;Services&lt;/h5&gt;
		&lt;p class="card-text"&gt;This card can be used to display one of the multiple services your website or company provides. Add multiple cards in their own columns to create a dynamic set of cards.&lt;/p&gt;
		&lt;a href="" class="btn btn-primary"&gt;Learn more&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="container">
<div class="card" style="width: 18rem;"><img class="card-img-top" src="https://d2gdtie5ivbdow.cloudfront.net/work.jpg" alt="work" />
<div class="card-body">
<h5 class="card-title">Services</h5>
<p class="card-text">This card can be used to display one of the multiple services your website or company provides. Add multiple cards in their own columns to create a dynamic set of cards.</p>
<a class="btn btn-primary text-white">Learn more</a></div>
</div>
</div>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-size: 18pt; font-family: 'times new roman', times, serif; color: #333333; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bootstrap has a <code>card</code></span><span style="color: #333333; font-family: 'times new roman', times, serif; font-size: 24px; white-space: pre-wrap;"> component</span><span style="background-color: transparent; color: #333333; font-family: 'times new roman', times, serif; font-size: 18pt; white-space: pre-wrap;"> that works well for separating small amounts of content into visible boxes. Cards are separated into three main sections: <code>card-body</code>, <code>card-title</code>, and <code>card-text</code>. Images and buttons can also be added to the cards.</span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">navbar</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;nav class="navbar navbar-expand-sm navbar-dark bg-dark"&gt;
    &lt;a class="navbar-brand" href=""&gt;Company name&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarText"&gt;
      &lt;ul class="navbar-nav ml-auto"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href=""&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href=""&gt;Contact Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"><a class="navbar-brand" href="#">Company name</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> </button>
<div id="navbarText" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link">About Us</a></li>
<li class="nav-item"><a class="nav-link">Contact Us</a></li>
</ul>
</div>
</nav>
<p>&nbsp;</p>
<p><span id="docs-internal-guid-7916b7d0-7fff-cb9f-5ea8-0f076edb38ef" style="font-size: 18pt; color: #333333;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">Bootstrap also has a navigation bar that can be copied and pasted into your code. The <code>navbar</code> can display a company logo, company name, and a navigation menu all optimized for mobile compatibility. For mobile compatibility, the three optional Javascript CNDs are <strong>required</strong>. </span></span></span></p>

<p><span style="color: #333333;"><strong><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">What is Bootstrap?</span></span></strong></span></p> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-family: 'times new roman', times, serif; font-size: 16px; white-space: pre-wrap; color: #333333;"><span style="font-size: 18pt;">As the most popular CSS framework available, <em>Bootstrap</em> offers design templates for typography, forms, buttons, navigation, and other helpful components used in HTML documents. Freelance developers commonly use Bootstrap to rapidly build websites, however large tech companies such as Spotify, Twitter, and Lyft all use the framework as well. </span></span><span style="font-family: 'times new roman', times, serif; font-size: 16px; white-space: pre-wrap; color: #333333;"><span style="font-size: 18pt;">Bootstrap is also responsive, meaning it has built-in features to make websites mobile-friendly. </span></span></p> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-family: 'times new roman', times, serif; font-size: 16px; white-space: pre-wrap; color: #333333;"><span style="font-size: 18pt;">Free and open-source, this CSS framework can be downloaded into your project or easily added to the head element of an HTML document, just like adding your own custom CSS stylesheet. For this lesson, we will go over how to add and implement Bootstrap in a project for later usage.</span></span></p> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><strong style="color: #333333;"><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">How do I use Bootstrap?</span></span></strong></p> <p><span style="color: #333333;"><em style="color: #999999;">adding Bootstrap to your project</em></span></p> <p><code></code></p> <pre class="language-markup"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;</code></pre> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-size: 18pt; color: #333333; font-family: 'times new roman', times, serif;">Given the Bootstrap CSS framework is actually a large stylesheet containing CSS declarations, we can add Bootstrap via a link in the head element of our HTML document.&nbsp; This link will connect to a network of servers containing the CSS code.&nbsp; Together, this network of servers is called a CDN or <span style="background-color: transparent; white-space: pre-wrap;">content delivery network. </span><span style="background-color: transparent; white-space: pre-wrap;">Like a link to any other stylesheet, a <code>href</code> to the location of the stylesheet is required. The <code>integrity</code> attribute prevents the CDN from delivering any additional content created by a third-party attacker while the <code>crossorigin</code> attribute allows connecting to the CDN without exchanging user credentials. This link can also be found on the official Bootstrap website: </span></span><span style="font-size: 14pt;"><a href="https://getbootstrap.com/" target="_blank" rel="noopener">https://getbootstrap.com/</a>.</span></p> <p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-size: 14pt;"><img class="img-fluid" src="https://d2gdtie5ivbdow.cloudfront.net/django_web_app/html_css/using_bootstrap.png" alt="Using Bootstrap" width="892" height="476" /></span></p>

<p><span style="color: #333333;"><span id="docs-internal-guid-ac644704-7fff-08e6-aa2b-4835f5c44682" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">Bootstrap simplifies rendering a dynamic web page with custom grid and container systems. HTML elements are nested in Bootstrap division containers, rows, and columns to create an instantly responsive design.</span></span></span></span></p>
<p>&nbsp;</p>
<p><span style="color: #333333;"><strong><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Containers</span></span></strong></span></p>
<p><em style="color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; white-space: normal;">container</em></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
         &lt;h3&gt;About Us&lt;/h3&gt;
         &lt;p&gt;Our team specializes in providing you with the best tools and services available.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><span id="docs-internal-guid-369a1f56-7fff-ea2c-3521-7501e98f2cf8" style="font-size: 18pt; color: #333333;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">Bootstrap <code>container</code> is added to the division tag class attribute to automatically align, pad, and shift the content within them. </span></span></span><span style="font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;">They are essentially create improved division elements that section off the different parts of an HTML document.</span> <span style="font-family: 'times new roman', times, serif; background-color: transparent; white-space: pre-wrap; color: #333333; font-size: 18pt;">Headings, paragraphs, images, and any other content are placed in containers. </span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p>
<p><em style="color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; white-space: normal;">container-fluid</em></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;body&gt;
      &lt;div class="container-fluid" style=&ldquo;background-color:gray&rdquo;&gt;
         &lt;h3&gt;About Us&lt;/h3&gt;
         &lt;p&gt;Our team specializes in providing you with the best tools and services available.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-size: 18pt; font-family: 'times new roman', times, serif; color: #333333; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bootstrap has another container class called <code>container-fluid</code> that stretches the entire width of the screen or width of the parent element holding it. This container is great for adding a background color to a particular part of the website. Specify add the background color as an inline CSS declaration after the container-fluid class attribute.</span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p>
<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 18pt; color: #333333;"><strong><span style="font-family: Arial; background-color: transparent; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Grid system</span></strong></span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><em style="color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; white-space: normal;">Bootstrap 12 column grid system</em></p>
<div class="container">
<div class="row">
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">1</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">2</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">3</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">4</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">5</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">6</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">7</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">8</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">9</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">10</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">11</p>
</div>
<div class="col-1 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">12</p>
</div>
</div>
</div>
<p><span id="docs-internal-guid-f4c8b997-7fff-faf5-c5d9-315a04a0939b" style="font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Bootstrap operates on a responsive 12 column grid system. Each HTML element can occupy anywhere from 1 to 12 columns. This design allows elements to be placed in the same row and dynamically move based on their column sizes.</span></span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><em style="color: #999999;">rows and columns</em></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="container"&gt;
     &lt;div class="row"&gt;
          &lt;div class="col-6"&gt;
             &lt;h4&gt;Column 1&lt;h4&gt;
             &lt;p&gt;This column takes up half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can be placed within the column.&lt;p&gt;
          &lt;/div&gt;
          &lt;div class="col-6"&gt;
             &lt;h4&gt;Column 2&lt;h4&gt;
             &lt;p&gt;This column takes up the other half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can also be placed within the column.&lt;p&gt;
          &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="container">
<div class="row">
<div class="col-6">
<h4>Column 1</h4>
<p>This column takes up half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can be placed within the column.</p>
</div>
<div class="col-6">
<h4>Column 2</h4>
<p>This column takes up the other half of the 12 columns in Bootstrap. Text, images and other Bootstrap components can also be placed within the column.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">6 of 12</p>
</div>
<div class="col-6 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">6 of 12</p>
</div>
</div>
</div>
<p><span id="docs-internal-guid-b5317ad5-7fff-68e1-a028-ad6cb339ba88" style="font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">The grid system uses columns in rows. First a division element with a <code>container</code> class is created. Then a new division element with a class attribute called <code>row</code> is nested in the container division. Finally, individual columns, <code>col</code>, are nested within the row division.</span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">columns and breakpoints</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="container"&gt;
     &lt;div class="row"&gt;
          &lt;div class="col-sm-12 col-md-12 col-lg-4"&gt;
                &lt;h4&gt;Column 1&lt;h4&gt;
                &lt;p&gt;This is a responsive column.&lt;p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-md-12 col-lg-4"&gt;
                &lt;h4&gt;Column 2&lt;h4&gt;
                &lt;p&gt;This is also a responsive column.&lt;p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-md-12 col-lg-4"&gt;
                &lt;h4&gt;Column 3&lt;h4&gt;
                &lt;p&gt;This is another responsive column.&lt;p&gt;
          &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4">
<h4>Column 1</h4>
<p>This is a responsive column it only occupies 4 of 12 Bootstrap columns in a large screen. But in a medium or small screen, it takes up an entire row or all 12 columns.</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<h4>Column 2</h4>
<p>This is also a responsive column and it only occupies 4 of 12 Bootstrap columns in a large screen. But in a medium or small screen, it takes up an entire row or all 12 columns.</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<h4>Column 3</h4>
<p>This is another responsive column and it occupies the remaining 4 of 12 Bootstrap columns in a large screen. In a medium or small screen, it takes up an entire row or all 12 columns.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">4 of 12 (col-lg) <br />12 of 12 (col-md)(col-sm)</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">4 of 12 (col-lg) <br />12 of 12 (col-md)(col-sm)</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 p-0">
<p class="card text-center" style="background-color: #e5dcf0; height: 100px; border-radius: 0;">4 of 12 (col-lg) <br />12 of 12 (col-md)(col-sm)</p>
</div>
</div>
</div>
<p><span id="docs-internal-guid-72429252-7fff-1372-30fd-52d0d6d9d369" style="font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Bootstrap column sizes can shift at different viewpoints. At a smaller viewpoint, the columns can be stacked on top of one another instead of keeping them side-by-side. Breakpoints can be specified for small (<code>col-sm</code>), medium (<code>col-md</code>), and large viewpoints (<code>col-lg</code>) followed by the number of columns it will occupy in that view. Change the size of your browser window to see it in action.</span></span></p>

<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-size: 18pt; font-family: Arial; color: #333333; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">Bootstrap utilities are class attributes used to quickly style and position HTML elements. Text formatting, color, background color, and even padding and margins can be handled using these custom utilities.</span></span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><strong style="color: #333333;"><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Using Bootstrap utilities</span></span></strong></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">contextual text class</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p class="text-primary"&gt;Blue text&lt;/p&gt;
&lt;p class="text-secondary"&gt;Gray text&lt;/p&gt;
&lt;p class="text-success"&gt;Green text&lt;/p&gt;
&lt;p class="text-danger"&gt;Red text&lt;/p&gt;
&lt;p class="text-warning"&gt;Yellow text&lt;/p&gt;
&lt;p class="text-info"&gt;Teal text&lt;/p&gt;
&lt;p class="text-light bg-dark"&gt;Light text&lt;/p&gt;
&lt;p class="text-dark"&gt;Dark text&lt;/p&gt;
&lt;p class="text-muted"&gt;Muted text&lt;/p&gt;
&lt;p class="text-white bg-dark"&gt;White text&lt;/p&gt;</code></pre>
<div class="container">
<p class="text-primary">Blue text</p>
<p class="text-secondary">Gray text</p>
<p class="text-success">Green text</p>
<p class="text-danger">Red text</p>
<p class="text-warning">Yellow text</p>
<p class="text-info">Teal text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>
</div>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-size: 18pt; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif;">There are ten contextual text classes, each with their own unique color specified within the class attribute.</span></span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">background color class</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="bg-primary text-white"&gt;Blue background&lt;/div&gt;
&lt;div class="bg-secondary text-white"&gt;Gray background&lt;/div&gt;
&lt;div class="bg-success text-white"&gt;Green background&lt;/div&gt;
&lt;div class="bg-danger text-white"&gt;Red background&lt;/div&gt;
&lt;div class="bg-warning text-dark"&gt;Yellow background&lt;/div&gt;
&lt;div class="bg-info text-white"&gt;Teal background&lt;/div&gt;
&lt;div class="bg-light text-dark"&gt;Light background&lt;/div&gt;
&lt;div class="bg-dark text-white"&gt;Dark background&lt;/div&gt;
&lt;div class="bg-white text-dark"&gt;White background&lt;/div&gt;
</code></pre>
<div class="container">
<div class="p-3 mb-2 bg-primary text-white">Blue background</div>
<div class="p-3 mb-2 bg-secondary text-white">Gray background</div>
<div class="p-3 mb-2 bg-success text-white">Green background</div>
<div class="p-3 mb-2 bg-danger text-white">Red background</div>
<div class="p-3 mb-2 bg-warning text-dark">Yellow background</div>
<div class="p-3 mb-2 bg-info text-white">Teal background</div>
<div class="p-3 mb-2 bg-light text-dark">Light background</div>
<div class="p-3 mb-2 bg-dark text-white">Dark background</div>
<div class="p-3 mb-2 bg-white text-dark">White background</div>
</div>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-size: 18pt; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif;">The same ten colors used for contextual text can also be applied as background colors.</span></span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">text alignment</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
</code></pre>
<div class="container">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
</div>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;"><span style="background-color: transparent;">Bootstrap also has preset text alignment classes. Text can be aligned to the left, right or cen</span><span style="background-color: transparent;">ter.</span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">text alignment at different viewpoints</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p class="text-center text-md-left"&gt;Left aligned text on viewpoints larger than medium (md). Centered text on all smaller viewpoints. &lt;/p&gt;
</code></pre>
<div class="container">
<p class="text-center text-md-left">Left aligned text on viewpoints larger than medium (md). Centered text on all smaller viewpoints.</p>
</div>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-size: 18pt; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif;">Bootstrap even allows different text alignment classes to be called at different viewpoints (<code>sm</code>,&nbsp;<code>md</code>,&nbsp;<code>lg</code>,&nbsp;<code>xl</code>). Dynamic text alignment can improve device compatibility and overall appearance on smaller devices. Change the side of your browser to see it in action.</span></span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">font weight and italics</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p class="font-weight-bold"&gt;Bold text helps to emphasis key words or phrases on the page.&lt;/p&gt;
&lt;p class="font-weight-light"&gt;Light weight text helps separate paragraph text from title or subtitle paragraphs.&lt;/p&gt;
&lt;p class="font-italic"&gt;Italic text helps alert the user to a particular section of text.&lt;/p&gt;</code></pre>
<div class="container">
<p class="font-weight-bold">Bold text helps to emphasis key words or phrases on the page.</p>
<p class="font-weight-light">Light weight text helps separate paragraph text from title or subtitle paragraphs.</p>
<p class="font-italic">Italic text helps alert the user to a particular section of text.</p>
</div>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-size: 18pt; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif;">Font weights and text formatting can also be changed using Bootstrap class attributes.</span></span></span></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;"><span style="font-family: 'times new roman', times, serif;">&nbsp;</span></span></span></span></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">fixed top</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="fixed-top"&gt;...&lt;/div&gt;</code></pre>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-size: 18pt; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif;">Bootstrap positioning class&nbsp;<code>fixed-top</code> places any element at the top of the page, from corner to corner</span><span style="font-family: 'times new roman', times, serif;">. The element remains at the top of the page even after scrolling down. This class attribute works well for an always present navigation bar.</span></span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">sticky top</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;div class="sticky-top"&gt;...&lt;/div&gt;</code></pre>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; color: #333333;"><span style="background-color: transparent;"><span style="font-family: 'times new roman', times, serif; font-size: 18pt;">The class&nbsp;<code>sticky-top</code> keeps an element at the top of the viewport but only after you scroll past it</span></span></span><span style="color: #333333; font-family: 'times new roman', times, serif; font-size: 24px; white-space: pre-wrap;">. </span><span style="color: #333333; font-family: 'times new roman', times, serif; font-size: 24px; white-space: pre-wrap;">This class attribute works well for two navigation bars, as we will see later.</span></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;"><span style="font-family: 'times new roman', times, serif;">&nbsp;</span></span></span></span></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent;"><span style="color: #999999;"><span style="font-family: 'times new roman', times, serif;"><strong style="color: #333333;"><span id="docs-internal-guid-27ffea12-7fff-2610-03b7-d6646c22c544" style="font-size: 18pt;"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Using Bootstrap padding and margin</span></span></strong></span></span></span></span></p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">padding</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p style="p-1"&gt;This is padding on all sides.&lt;/p&gt;

&lt;p style="pt-1"&gt;This is padding-top.&lt;/p&gt;
&lt;p style="pb-1"&gt;This is padding-bottom.&lt;/p&gt;
&lt;p style="pr-1"&gt;This is padding-right.&lt;/p&gt;
&lt;p style="pl-1"&gt;This is padding-left.&lt;/p&gt;

&lt;p style="px-1"&gt;This is padding for the left and right.&lt;/p&gt;
&lt;p style="py-1"&gt;This is padding for the top and bottom.&lt;/p&gt;
</code></pre>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; font-family: 'times new roman', times, serif; font-size: 18pt; color: #333333;"><span style="background-color: transparent;">Bootstrap handles CSS padding with class attributes based on the abbreviation of the original CSS properties padding (<code>p</code>), padding-top (<code>pt</code>), padding-bottom (<code>pb</code>), padding-right (<code>pr</code>), and padding-left (<code>pl</code>). The class attribute&nbsp;<code>px</code>&nbsp;applies to padding-left and padding-right while&nbsp;<code>py</code> applies to padding-top and padding-bottom. The number following the abbreviation is based on rems with <code>p-0</code>&nbsp;being no padding and&nbsp;<code>p-5</code>&nbsp;being three times the original padding.</span></span></p>
<p>&nbsp;</p>
<p><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="background-color: transparent; font-style: italic;"><span style="color: #999999;">margins</span></span></span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;p style="m-1"&gt;This is a margin on all sides.&lt;/p&gt;

&lt;p style="mt-1"&gt;This is margin-top.&lt;/p&gt;
&lt;p style="mb-1"&gt;This is margin-bottom.&lt;/p&gt;
&lt;p style="mr-1"&gt;This is margin-right.&lt;/p&gt;
&lt;p style="ml-1"&gt;This is margin-left.&lt;/p&gt;

&lt;p style="mx-1"&gt;This is a margin for the left and right.&lt;/p&gt;
&lt;p style="my-1"&gt;This is a margin for the top and bottom.&lt;/p&gt;
</code></pre>
<p><span style="color: #333333;"><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">Bootstrap handles CSS margins the same way as padding. Margin (<code>m</code>), margin-top (<code>mt</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">), margin-bottom (<code>mb</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">), margin-right (<code>mr</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">), and margin-left (<code>ml</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">) are all handled with abbreviations. The class attribute <code>mx</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;"> applies to margin-left and margin-right while <code>my</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;"> applies to margin-top and margin-bottom. Margins are also sized based on rems but margin also as an <code>auto</code></span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">&nbsp;</span><span style="background-color: transparent; font-family: 'times new roman', times, serif; font-size: 18pt;">size that automatically places even margins with the viewpoint.</span></span></p>

<p><span style="color: #333333;"><span style="font-size: 18pt; font-family: 'times new roman', times, serif; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bootstrap CSS framework is so powerful that it may seem like learning traditional CSS was unnecessary; however, customizing Bootstrap to your preferred colors and styles requires a general understanding of CSS. Any Bootstrap component can be overridden by your own custom CSS. </span><span style="font-size: 18pt; font-family: 'times new roman', times, serif; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">For example, Bootstrap buttons can be customized. As stated earlier, Bootstrap has only eight colors for buttons. So what if you want to make a custom colored button? This can be accomplished with some basic CSS.</span></span></p>
<p>&nbsp;</p>
<p><span style="color: #333333;"><strong><span id="docs-internal-guid-d596e90e-7fff-833e-2c7e-5629c1999daa" style="font-size: 18pt; font-family: arial, helvetica, sans-serif;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Creating custom CSS using Bootstrap</span></span></strong></span></p>
<p><span style="color: #999999; font-style: italic;">custom Bootstrap button</span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code> &lt;a href="" class="btn btn-custom"&gt;Custom button&lt;/a&gt;</code></pre>
<div class="container"><a class="btn btn-custom text-white">Custom button</a></div>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="font-family: 'times new roman', times, serif; font-size: 18pt;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="color: #333333;">This is an example of a custom Bootstrap button. The new button is called <code>btn-custom</code>.</span></span></span></p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;">&nbsp;</p>
<p dir="ltr" style="line-height: 1.38; margin-top: 12pt; margin-bottom: 12pt;"><span style="color: #999999; font-style: italic;">custom Bootstrap button CSS</span></p>
<pre class="language-markup" style="word-spacing: 0px;"><code>&lt;style&gt;
    .btn-custom, .btn-custom:active, .btn-custom:visited {
        background-color: #6626AA;
        border: #331058 1px solid;
        color: #FFFF;
        border-radius: 30px;
    }

    .btn-custom:hover {
        background-color:#331058;
    }
&lt;/style&gt;</code></pre>
<p><span style="font-size: 18pt; color: #333333;"><span style="background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; font-family: 'times new roman', times, serif;">The button has a background color, border color, text color and the border radius. All of these are customizable. Add the custom class attribute <code>btn-custom</code> to the style element but also added <code>btn-custom:active</code>, <code>btn-custom:visited</code>, <code>btn-custom:hover </code></span><span style="background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: 'times new roman', times, serif;">so the button color will change when it is visited, clicked or hovered over.</span> </span></span></p>
<p>&nbsp;</p>
<p><span style="font-size: 18pt; color: #333333;"><strong><span id="docs-internal-guid-7fa6d110-7fff-50ad-2d5f-a599ec797c22"><span style="font-family: Arial; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Moving forward with Bootstrap</span></span></strong></span></p>
<p><span id="docs-internal-guid-0a112fbe-7fff-003e-aaa7-de115ba4a296" style="font-size: 18pt; font-family: 'times new roman', times, serif; color: #333333;"><span style="background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">We have just covered a very small portion of Bootstrap in this lesson. More features and customization can be added to all of the components listed above.&nbsp; Look through the Bootstrap documentation to learn more about the features not mentioned in this tutorial.</span></span></p>