{"id":1599,"date":"2020-02-23T12:13:08","date_gmt":"2020-02-23T17:13:08","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1599"},"modified":"2024-02-13T17:24:19","modified_gmt":"2024-02-13T17:24:19","slug":"responsive-optimization-exercise","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/responsive-optimization-exercise\/","title":{"rendered":"Responsive Optimization Exercise"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1702\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1.jpg\" alt=\"Decorative image of the Eiffel Tower and River Seine in Paris. \" class=\"wp-image-1600\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1.jpg 2560w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-300x199.jpg 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-1024x681.jpg 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-768x511.jpg 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-1536x1021.jpg 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-2048x1362.jpg 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/chris-karidis-nnzkZNYWHaU-unsplash-scaled-1-1568x1042.jpg 1568w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@chriskaridis?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Chris Karidis<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>This exercise is going to walk you through a simple Bootstrap webpage that will take full advantage of Bootstrap&#8217;s responsive components and custom CSS to create a finished product that is fully optimized for both a desktop and mobile layout. <\/p>\n\n\n\n<p>We&#8217;re going to cover a lot of ground, so get ready! <\/p>\n\n\n\n<p>There are two different approaches for utilizing this lesson:  <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Try it out in its entirety.<\/strong> Follow along with VS Code open and complete the entire exercise. This is fantastic practice that will help you feel more confident with Bootstrap and Project 2. <\/li>\n\n\n\n<li><strong>Use it as a reference.<\/strong> As noted, this exercise covers a TON of ground. Feel free to refer back to it for a refresher. Obviously, each step builds off of what came before it, but you can still get a good idea of how to implement certain components and customizations by referencing the steps below. <\/li>\n<\/ol>\n\n\n\n<p>All said, we&#8217;re going to cover the following: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#starter-template\">Using the Bootstrap Starter Template<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#local\">Adding local copies of Bootstrap&#8217;s CSS and JavaScript files<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#navbar\">Adding a Navbar<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#semantic\">Adding semantic elements<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#grid\">Grid components<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#img\">Adding images to the grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#text\">Adding text to the grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#navbar\">Adding a logo to the navbar<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"custom\">After all the components are added, we&#8217;ll work on customizing those components and optimizing their design for a responsive, mobile layout. We&#8217;ll cover: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#custom-css\">Adding a <code>custom.css <\/code>stylesheet<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#google\">Adding a Google Font<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#typography\">Responsive typography<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#inspector\">Using the Inspector to identify CSS selectors<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#order\">Ordering columns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#offsetting\">Offsetting columns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise#media\">Implementing a media query<\/a><\/li>\n<\/ul>\n\n\n\n<p>That&#8217;s a lot! But the good news is that none of it is very difficult and in the end you will have created a mobile-first responsive website that utilizes many of Bootstrap&#8217;s powerful components.<\/p>\n\n\n\n<p>Ready? Here we go! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>To get us going we&#8217;re going to create a folder for this exercise called &#8220;<code>bootstrap-exercise<\/code>.&#8221; Inside that folder we&#8217;ll create three more folders: <code>css<\/code>, <code>js<\/code>, and <code>img<\/code>. These will hold our CSS files, JavaScript files, and images. <\/p>\n\n\n\n<p>Since this is just an exercise, you can save your <code>bootstrap-exercise<\/code> folder in your <code>webdev<\/code> folder on Dropbox, but there&#8217;s no need to upload it to the server.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"starter-template\">Bootstrap Starter Template<\/h3>\n\n\n\n<p>Open Visual Studio Code and create a new file. Save it as <code>index.html<\/code> in the <code>bootstrap-exercise<\/code> folder that you just created. <\/p>\n\n\n\n<p>Next,<a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\"> visit GetBootstrap&#8217;s starter page.<\/a> Copy the code under QuickStart Step 2 and paste it into your <code>index.html<\/code> file<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"local\"><\/h3>\n\n\n\n<h2 class=\"wp-block-heading\">Add some components! <\/h2>\n\n\n\n<p>Let&#8217;s take a few minutes to add some Bootstrap components to our HTML document. First, navigate to <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">getbootstrap.com<\/a> and then click &#8220;Get Started.&#8221; <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navbar\">Add a Navbar<\/h3>\n\n\n\n<p>On the left side of the scroll down until you see the &#8220;Components&#8221; heading and then click the link for Navbar. <\/p>\n\n\n\n<p>On the navbar page,  scroll down just a bit until you get to the first example of a navbar. Copy the code (there&#8217;s a copy button in the upper right corner of the screen) and paste it into your HTML document under the opening <code>&lt;body&gt;<\/code> tag. This is what you&#8217;ll want to copy:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1069\" height=\"803\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-9.46.42-AM.png\" alt=\"\" class=\"wp-image-1604\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-9.46.42-AM.png 1069w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-9.46.42-AM-300x225.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-9.46.42-AM-1024x769.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-9.46.42-AM-768x577.png 768w\" sizes=\"auto, (max-width: 1069px) 100vw, 1069px\" \/><figcaption class=\"wp-element-caption\">The first navbar component. <\/figcaption><\/figure>\n\n\n\n<p>Next, let&#8217;s make the navbar a little fancier. Instead of the light gray background, let&#8217;s add some color. <\/p>\n\n\n\n<p>Scroll down on Bootstrap&#8217;s navbar page until you get to the section titled <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/navbar\/#color-schemes\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/components\/navbar\/#color-schemes\" target=\"_blank\" rel=\"noreferrer noopener\">Color Schemes<\/a>. We&#8217;re going to pick the bright blue &#8220;primary&#8221; color scheme. <\/p>\n\n\n\n<p>To do this, we&#8217;re going to copy the class selectors that refer to the navbar&#8217;s color from the middle navbar example. See the handy visual below for reference. The blue highlighted code is what we&#8217;re after. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1084\" height=\"471\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.16.16-AM.png\" alt=\"\" class=\"wp-image-1610\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.16.16-AM.png 1084w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.16.16-AM-300x130.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.16.16-AM-1024x445.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.16.16-AM-768x334.png 768w\" sizes=\"auto, (max-width: 1084px) 100vw, 1084px\" \/><\/figure>\n\n\n\n<p>Once you&#8217;ve copied that code, return to VS Code and locate your navbar code. That very first line of navbar code has the two color classes that we&#8217;re going to replace. Again, see that blue highlighted code?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"35\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.30.09-AM.png\" alt=\"\" class=\"wp-image-1614\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.30.09-AM.png 564w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-11.30.09-AM-300x19.png 300w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n<\/div>\n\n\n<p>Replace <code>navbar-light bg-light<\/code> with <code>navbar-dark bg-primary<\/code>. Save and refresh. <\/p>\n\n\n\n<p>You should now see a bright blue navbar! <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"semantic\">Add Semantic Elements<\/h3>\n\n\n\n<p>Let&#8217;s take a moment to think about adding some <a href=\"https:\/\/nmi.cool\/web\/div-tags-and-semantic-elements#semantic-elements\" target=\"_blank\" rel=\"noreferrer noopener\">semantic elements<\/a> to our page so that it&#8217;s better organized and more accessible. <\/p>\n\n\n\n<p>First, let&#8217;s wrap our navbar and &lt;h1&gt; tag in a <code>&lt;header&gt;<\/code> element. The opening tag will go before the &lt;h1&gt; tag, and the closing tag will go after the closing <code>&lt;\/nav&gt;<\/code> tag for the navbar. <\/p>\n\n\n\n<p><strong>Pro Tip:<\/strong> That navbar code is LONG, right? If you want to hide it from view you can hover next to the row number in VS Code. See that little downward arrow that appears? Click it and your navbar will collapse and the downward arrow will now be a right-facing arrow. You can expand it again by clicking the right-facing arrow.  This is a great way to keep your sanity when you&#8217;re working with components that have a lot of code. <\/p>\n\n\n\n<p>Next, let&#8217;s add a <code>&lt;main&gt;<\/code> element right under the <code>&lt;\/header&gt;<\/code>. The closing <code>&lt;\/main&gt;<\/code> tag will go right before your <code>&lt;script&gt;<\/code> files. <\/p>\n\n\n\n<p>At this time you can also delete the default <code>&lt;h1&gt;<\/code> tag that contains the &#8220;Hello World!&#8221; We&#8217;re about to add a Jumbotron, so you can completely erase the <code>&lt;h1&gt;<\/code> element!<a href=\"#footnote-1-1599\" id=\"note-1-1599\" rel=\"footnote\">1<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"grid\">Add a Grid Component<\/h3>\n\n\n\n<p>One of the most powerful features of Bootstrap is its <a href=\"https:\/\/nmi.cool\/web\/bootstrap#grid\" target=\"_blank\" rel=\"noreferrer noopener\">responsive grid<\/a> system. Let&#8217;s take full advantage of it and add some grid elements to our HTML. <\/p>\n\n\n\n<p>There are a couple ways that you could approach this. First, you can visit the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/grid\/\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/layout\/grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">grid system page<\/a> on Bootstrap&#8217;s website and copy and paste a grid element that looks appealing to you. Or you can hand write some code. Let&#8217;s practice that! <\/p>\n\n\n\n<p>We&#8217;re going to create a container for our rows and columns<a href=\"#footnote-2-1599\" id=\"note-2-1599\" rel=\"footnote\">2<\/a>. Here&#8217;s what your code should look like: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"91\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.32.39-PM.png\" alt=\"\" class=\"wp-image-1621\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.32.39-PM.png 550w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.32.39-PM-300x50.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n<\/div>\n\n\n<p>Make sure to include that closing <code>&lt;\/div&gt;<\/code> tag! <\/p>\n\n\n\n<p>This container is going to have two rows nested inside it. Again, here&#8217;s a handy visual. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"178\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.35.01-PM.png\" alt=\"\" class=\"wp-image-1622\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.35.01-PM.png 624w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-1.35.01-PM-300x86.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>A good thing to note here is that we are keeping our code organized by indenting nesting elements. This will make our lives so much easier! <\/p>\n\n\n\n<p>Next, we&#8217;re going to add two columns to each row, but first, here&#8217;s a quick preview of where we&#8217;re headed: we&#8217;re going to create a layout with a two rows; each row will have two columns. In the first row, the first column will have an image and the second column will have some text. We&#8217;ll reverse the order in the second row. We&#8217;ll have some visuals to help us in a minute, but first just try to picture that layout in your mind. <\/p>\n\n\n\n<p>Remember, when we&#8217;re sizing columns <strong>twelve is our magic number<\/strong> <a href=\"#footnote-3-1599\" id=\"note-3-1599\" rel=\"footnote\">3<\/a>. If we want our image to take up less of the row than our paragraph we could make that happen by assigning one column a smaller size than the other, like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"385\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-2.07.12-PM.png\" alt=\"\" class=\"wp-image-1623\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-2.07.12-PM.png 755w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-21-at-2.07.12-PM-300x153.png 300w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/figure>\n\n\n\n<p>Again, pay attention to that indenting and make sure all your <code>&lt;div&gt;<\/code> tags have a corresponding closing tag! <\/p>\n\n\n\n<p>We&#8217;ve also added a <a href=\"https:\/\/nmi.cool\/web\/bootstrap#applying-grid\" target=\"_blank\" rel=\"noreferrer noopener\">breakpoint to these columns<\/a> so that the column size will apply when they are size small (small is defined by Bootstrap as bigger than <code>576px<\/code> or roughly the size of a mobile phone screen in landscape orientation). Since we don&#8217;t have a bigger breakpoint specified, like medium or large, the layout will stay the same on any sized device that is <code>576px<\/code> or larger.<\/p>\n\n\n\n<p>However, when we shrink the screen to extra small, which will mimic the screen size of a mobile phone in portrait orientation (Bootstrap defines extra small as anything fewer than <code>576px<\/code> wide) the columns will change their appearance and stack vertically.  More on this later! <\/p>\n\n\n\n<p>Okay, time to add some content to our columns! <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"img\">Add Some Images <\/h3>\n\n\n\n<p>We&#8217;re going to add some images to this project, so<a href=\"https:\/\/apweb.quest\/downloads\/bstrap.zip\"> download this image folder<\/a> and make sure the contents end up in the image folder you created for this exercise. BTW, this exercise talks about Paris and the images USED to be of Paris. That is no longer the case because we lost Paris!! Can you believe that? For now, you should have some nice images from the North Carolina mountains to play around with, but feel free to download your own. But for purposes of this exercise pretend we are still in Paris. <\/p>\n\n\n\n<p>In the first column of the first row, we&#8217;re going to add one of the images. We&#8217;ll want to make sure that we add appropriate alt text as well. Lastly, we&#8217;re going to want to make sure our <a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.1\/content\/images\/#responsive-images\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/content\/images\/#responsive-images\" target=\"_blank\">image is responsive<\/a>, so we will add a class called <code>img-fluid<\/code>. <\/p>\n\n\n\n<p>Here&#8217;s what your image element should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1306\" height=\"130\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-4.04.54-PM.png\" alt=\"\" class=\"wp-image-1641\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-4.04.54-PM.png 1306w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-4.04.54-PM-300x30.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-4.04.54-PM-1024x102.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-4.04.54-PM-768x76.png 768w\" sizes=\"auto, (max-width: 1306px) 100vw, 1306px\" \/><\/figure>\n\n\n\n<p>Repeat this process for another image adding it to the last column of the second row.<\/p>\n\n\n\n<p>Lastly, we&#8217;re going to <strong>transform these images from squares to circles<\/strong> by visiting Bootstrap&#8217;s website, going to &#8220;Utilities,&#8221; and selecting &#8220;Borders.&#8221; If we scroll down <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/borders\/#border-radius\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/utilities\/borders\/#border-radius\" target=\"_blank\" rel=\"noreferrer noopener\">on that page<\/a> to the border-radius section we will see the code needed to turn our image into a circle. Copy the <code>rounded-circle<\/code> class and paste it right after <code>img-fluid<\/code> class for both images.  <\/p>\n\n\n\n<p>It&#8217;s important to note two things here. First, the two classes should be inside the same set of quotation marks: <code>class=\"img-fluid rounded-circle\"<\/code>.  <\/p>\n\n\n\n<p>The second thing to note is that the rounded-circle class only works to turn our image into a circle because our image was a square in the first place. If we had a rectangular image, we&#8217;d end up with an ellipse instead of a circle<a href=\"#footnote-4-1599\" id=\"note-4-1599\" rel=\"footnote\">4<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Some Text<\/h3>\n\n\n\n<p class=\"text\">To complete our layout we&#8217;ll add a <code>&lt;p&gt;<\/code> element to the second column in the first row, and the first column in the second row. In other words, both of the columns that we set to a size of 8. <\/p>\n\n\n\n<p>To stick with our theme of Paris we&#8217;ll use a short passage from Victor Hugo&#8217;s classic novel, <em>Les Mis\u00e9rables<\/em>. Copy and paste it into a <code>&lt;p&gt;<\/code> element inside the two columns.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">For Paris is a total. Paris is the ceiling of the human race. The whole of this prodigious city is a foreshortening of dead manners and living manners. He who sees Paris thinks he sees the bottom of all history with heaven and constellations in the intervals. Paris has a capital, the Town-Hall, a Parthenon, Notre-Dame, a Mount Aventine, the Faubourg Saint-Antoine, an Asinarium, the Sorbonne, a Pantheon, the Pantheon, a Via Sacra, the Boulevard des Italiens, a temple of the winds, opinion; and it replaces the Gemoni\u00e6 by ridicule. Its&nbsp;<em>majo<\/em>&nbsp;is called \u201cfaraud,\u201d its Transteverin is the man of the faubourgs, its&nbsp;<em>hammal<\/em>&nbsp;is the market-porter, its lazzarone is the p\u00e8gre, its cockney is the native of Ghent. Everything that exists elsewhere exists at Paris.<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"logo\">Add a Logo to the Navbar<\/h3>\n\n\n\n<p>Let&#8217;s add one more image before we call it a day! Wouldn&#8217;t it be nice if we could add a logo to our navbar?<\/p>\n\n\n\n<p>To find the code to add an image (aka a logo) to the navbar, let&#8217;s go back to <a rel=\"noreferrer noopener\" aria-label=\"Bootstrap's website (opens in a new tab)\" href=\"https:\/\/www.getbootstrap.com\" target=\"_blank\">Bootstrap&#8217;s website<\/a> and find the navbar component, then locate the code you&#8217;ll need to add an image.  Take a few seconds to see if you can locate the code on your own. If you get stuck, click the ellipses.<a href=\"#footnote-5-1599\" id=\"note-5-1599\" rel=\"footnote\">5<\/a><\/p>\n\n\n\n<p>We&#8217;re going to copy the entire <code>&lt;img&gt;<\/code> tag and paste it into our navbar right inside the <code>navbar-brand<\/code> link&#8211; so it looks just like the screenshot below. Next, we&#8217;ll replace the image source with a handy Paris logo that is already in your <a href=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/2020\/02\/img.zip\">image folder<\/a>. Since our logo is a rectangle rather that a square, and we don&#8217;t want to distort it, let&#8217;s remove the <code>width<\/code> from the element and leave the <code>height<\/code> at 24. We&#8217;ll also add some alt text. The end result should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"107\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.42.32-AM.png\" alt=\"\" class=\"wp-image-2850\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.42.32-AM.png 671w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.42.32-AM-300x48.png 300w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><figcaption class=\"wp-element-caption\">Your logo code should look like this! <\/figcaption><\/figure>\n\n\n\n<p>Okay, at this point we should have a nice navbar, Jumbotron, and responsive grid with two photos and some text. When we refresh and save our webpage it should look like this! <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1862\" height=\"1364\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM.png\" alt=\"\" class=\"wp-image-1646\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM.png 1862w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM-300x220.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM-1024x750.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM-768x563.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM-1536x1125.png 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-7.08.47-PM-1568x1149.png 1568w\" sizes=\"auto, (max-width: 1862px) 100vw, 1862px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Customizing Components and Responsive Optimization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom-css\">Custom CSS<\/h3>\n\n\n\n<p>We&#8217;ve got a decent webpage that we&#8217;ve built using a whole bunch of Bootstrap components\u2014 not too shabby! Let&#8217;s fancy it up a bit with some custom CSS. <\/p>\n\n\n\n<p>To get started, open a new file in VS Code and name is <code>custom.css<\/code>. Save that file inside the CSS folder that you created for this project. <\/p>\n\n\n\n<p>Next we&#8217;re going to link that stylesheet to our HTML document right below the <code>bootstrap.css<\/code> file. You should be a pro at linking external stylesheets by now, but if you need a refresher <a href=\"https:\/\/nmi.cool\/web\/linking-to-an-external-stylesheet\/\" target=\"_blank\" rel=\"noreferrer noopener\">check out this resource<\/a>. <\/p>\n\n\n\n<p>Okay, now that we&#8217;ve linked our stylesheet, let&#8217;s style our webpage! <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"font\">Add a Google Font<\/h3>\n\n\n\n<p>You might have already explored <a href=\"https:\/\/nmi.cool\/web\/fonts#google-fonts\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a> in a previous lesson, but now&#8217;s a good time to refresh your memory\u2014 or try them for a first time. Google Fonts are an easy way to customize your webpage by bringing in a non-system font. <\/p>\n\n\n\n<p>In this example we&#8217;re going to style the <code>&lt;h1&gt;<\/code> element in our Jumbotron with a new font. <\/p>\n\n\n\n<p>First, we&#8217;ll visit <a rel=\"noreferrer noopener\" aria-label=\"fonts.google.com (opens in a new tab)\" href=\"https:\/\/fonts.google.com\" target=\"_blank\">fonts.google.com<\/a> to find a font we like. We&#8217;re going to go with &#8220;Squada One,&#8221; but feel free to pick whatever you like! <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.47.52-AM-1024x470.png\" alt=\"\" class=\"wp-image-2852\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.47.52-AM-1024x470.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.47.52-AM-300x138.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.47.52-AM-768x352.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.47.52-AM.png 1199w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> Click &#8220;select this style&#8221;. If you can&#8217;t see the font you selected, click the blue circle at the top of the screen to expand your selected font families (see below!).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"721\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.52.02-AM.png\" alt=\"\" class=\"wp-image-2853\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.52.02-AM.png 924w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.52.02-AM-300x234.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.52.02-AM-768x599.png 768w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure>\n\n\n\n<p>  You&#8217;re going to copy the <code>&lt;link&gt;<\/code> tag for this font&#8217;s stylesheet (in the pink circle) and paste it into your HTML document between the <code>&lt;link&gt;<\/code> tags for the <code>bootstrap.css<\/code> stylesheet and the <code>custom.css<\/code> stylesheet in the <code>&lt;head&gt;<\/code> of your document.<a href=\"#footnote-6-1599\" id=\"note-6-1599\" rel=\"footnote\">6<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"347\" height=\"757\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.56.50-AM.png\" alt=\"\" class=\"wp-image-2855\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.56.50-AM.png 347w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-9.56.50-AM-138x300.png 138w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Next you&#8217;ll need to apply the font to your <code>&lt;h1&gt;<\/code> element. Copy the CSS rule from the Google Font website (indicated by the green arrow above) and paste it into your CSS file like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1550\" height=\"258\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM.png\" alt=\"\" class=\"wp-image-1674\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM.png 1550w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM-300x50.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM-1024x170.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM-768x128.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-11.48.20-AM-1536x256.png 1536w\" sizes=\"auto, (max-width: 1550px) 100vw, 1550px\" \/><\/figure>\n\n\n\n<p>Save everything and refresh your browser. You should see a fancy new font in your Jumbotron! <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"typography\">Responsive Typography <\/h3>\n\n\n\n<p>Next, let&#8217;s make our paragraph text a little bigger. First, we might want to figure out the default font size of our <code>&lt;p&gt;<\/code> element.<\/p>\n\n\n\n<p>How do we do that? We&#8217;ll we could try to dig around in the 10,000+ lines of code in <code>bootstrap.css<\/code> or we could use the <a href=\"https:\/\/nmi.cool\/web\/inspector-gadgets\/\" target=\"_blank\" rel=\"noreferrer noopener\">Inspector<\/a> to quickly find the answer. <\/p>\n\n\n\n<p>In your Google Chrome window highlight any bit of text in your paragraph, then right click and pick &#8220;Inspect.&#8221; Our inspect window will appear: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2290\" height=\"1306\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM.png\" alt=\"\" class=\"wp-image-1685\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM.png 2290w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-300x171.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-1024x584.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-768x438.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-1536x876.png 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-2048x1168.png 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.31.27-PM-1568x894.png 1568w\" sizes=\"auto, (max-width: 2290px) 100vw, 2290px\" \/><figcaption class=\"wp-element-caption\">Note: if your Inspector window isn&#8217;t docked to the right like this once, you can click the three dots in the upper right corner to change the view so it matches this. <\/figcaption><\/figure>\n\n\n\n<p>The &#8220;Style&#8221; panel is on the lower half of the screen. Scroll down a bit until you see the font size. In this example we see: <code>font-size: 1rem<\/code>. <\/p>\n\n\n\n<p>You you might be thinking: <strong>What&#8217;s rem?<\/strong> That&#8217;s a great question! A rem, or root em, is a relative length unit, meaning it&#8217;s size is determined by it&#8217;s relationship to something else. Specifically, with an <strong>rem the size is relative to the font size of the root element.<\/strong> <\/p>\n\n\n\n<p>The root element will automatically inherit the default font size of the browser, which is usually <code>16px<\/code>. We can double check that using our inspector! <\/p>\n\n\n\n<p>Let&#8217;s look back that the Inspector and click the Computed tab right next to the Style tab (see the blue circle below). <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2198\" height=\"1320\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM.png\" alt=\"\" class=\"wp-image-1686\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM.png 2198w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-300x180.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-1024x615.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-768x461.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-1536x922.png 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-2048x1230.png 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-1.33.34-PM-1568x942.png 1568w\" sizes=\"auto, (max-width: 2198px) 100vw, 2198px\" \/><\/figure>\n<\/div>\n\n\n<p>Scroll down in that panel until you see the font size (see the blue arrow).  Notice how it&#8217;s <code>16px<\/code>? Since the Style panel told us our font-size was <code>1rem<\/code> we can conclude that  <code>1rem<\/code> is the equivalent of <code>16px<\/code>.<\/p>\n\n\n\n<p>That means that if we wanted our paragraph <code>font-size<\/code> to equal <code>32px<\/code> we could change the font in our style sheet to <code>2rem<\/code>. If we want something in between we could go with <code>1.2rem<\/code>. Go ahead an make that change by adding it to your stylesheet like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"176\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-8.05.55-PM.png\" alt=\"\" class=\"wp-image-1652\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-8.05.55-PM.png 770w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-8.05.55-PM-300x69.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-8.05.55-PM-768x176.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>In general, we should try to use relative units instead of fixed values when we&#8217;re designing responsively. This will ensure that our design systematically responds to any changes we make to the root element or any changes the user makes to their default browser settings. <\/p>\n\n\n\n<p>You can learn little bit more about relative units here: <a rel=\"noreferrer noopener\" aria-label=\"Relative Units (opens in a new tab)\" href=\"https:\/\/thecssworkshop.com\/lessons\/relative-units\" target=\"_blank\">Relative Units<\/a> and <a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.asp\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"CSS Units (opens in a new tab)\">CSS Units<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inspector\">Using the Inspector to find CSS Selectors<\/h3>\n\n\n\n<p>We just used the <a href=\"https:\/\/nmi.cool\/web\/inspector-gadgets\/\" target=\"_blank\" rel=\"noreferrer noopener\">Inspector<\/a> to learn about our webpage&#8217;s default font size. The Inspector is a powerful tool to help us figure out the specific selector that Bootstrap is using to style an element. Once we know the selector, we can add a new style in our custom CSS document and overwrite Bootstrap&#8217;s styling. This will allow us to create unique, personalized layouts using Bootstrap themes and elements. We&#8217;ll use a simple example to try this out\u2014 we&#8217;ll change the color of our search button to something that shows up better against the blue nav bar. <\/p>\n\n\n\n<p>In your Chrome browser hover over the search button (on the right side of your nav bar) and right click, then click &#8220;Inspect.&#8221; You&#8217;ll be able to see the CSS rules that have been applied to the button in the Inspector window. Make sure the search button is selected in the Elements window (see the red arrow) and then look down to the Style window to see which selector is setting the <code>color<\/code> property for the search button (blue arrow).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"797\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.09.33-AM-1024x797.png\" alt=\"\" class=\"wp-image-2856\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.09.33-AM-1024x797.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.09.33-AM-300x234.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.09.33-AM-768x598.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.09.33-AM.png 1234w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We can see that the selector <code>.btn-outline-success<\/code>. We can copy the entire <code>.btn-outline-success<\/code> rule into our <code>custom.css<\/code> to override the two color selectors. <\/p>\n\n\n\n<p>Paste it in your CSS document. Now we can pick a color that is better suited to our design. Maybe a shade of yellow so that it is clearly visible against the blue like <code>#ffdd5c<\/code>. Go ahead and replace both hex codes. Your code should look like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"108\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.14.51-AM.png\" alt=\"\" class=\"wp-image-2857\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.14.51-AM.png 443w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.14.51-AM-300x73.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/figure>\n\n\n\n<p>Save and refresh your design in Chrome. That text should look yellow! But wait a second- hover over your search button. Do you see green pop up again? How do we fix that? <\/p>\n\n\n\n<p>If you click the button again in the Inspector you can see the selector for the hover state of the button (AKA when we are hovering over it with our mouse) by clicking <code>:hov<\/code> in the style panel (blue circle below) and selecting <code>:hover<\/code> (green arrow below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"996\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.36.44-AM.png\" alt=\"\" class=\"wp-image-2859\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.36.44-AM.png 1014w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.36.44-AM-300x295.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.36.44-AM-768x754.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><\/figure>\n\n\n\n<p>There&#8217;s a couple interesting things to note in the screenshot above. First, you can see that when the hover state of the button is selected, new style rules are being applied to the button: notice how the yellow color from our <code>custom.css<\/code> is crossed out? It&#8217;s also helpful to note that the current styles are above the styles that are being overridden. So if we want to change the hover state of our button, we can copy the entire CSS rule from the inspector window and add it to our CSS document and update the color properties with the correct hex code. We&#8217;ll use the same yellow from before along with the blue from the nav bar (see if you can find that color code on your own!). When you&#8217;re done it should look something like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"144\" src=\"http:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.39.30-AM.png\" alt=\"\" class=\"wp-image-2860\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.39.30-AM.png 480w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2021\/06\/Screen-Shot-2021-06-19-at-10.39.30-AM-300x90.png 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>The inspector is a vital tool to help you customize standard Bootstrap elements, so make sure to test it out!  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Problem Solving<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"order\">Ordering Columns<\/h3>\n\n\n\n<p>Right now, when we look at our design on a laptop or desktop device we see alternating images and text in a nice, balanced layout. <\/p>\n\n\n\n<p>However, you might have noticed that when we shrink our browser to a mobile device size and our columns stack in vertical rows they stack as image, text, text, image. Say we wanted them to stack as image, text, image, text instead to achieve a more attractive mobile layout\u2014 how would we do that? <\/p>\n\n\n\n<p>Back on <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\/#reordering\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/layout\/columns\/#reordering\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap&#8217;s Grid page<\/a> we can learn about reordering columns so that we can control the order they appear in at different breakpoints. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"952\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.19.31-PM.png\" alt=\"\" class=\"wp-image-1655\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.19.31-PM.png 1400w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.19.31-PM-300x204.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.19.31-PM-1024x696.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.19.31-PM-768x522.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<p>We don&#8217;t actually have to make any changes to the first row (the one with the Paris dawn image and text in it), because when it&#8217;s stacked it is in the correct order (image then text). So we need to add order classes to the columns in the second row (the Paris night image and text) to flip the order of the text and image when we&#8217;re looking at it on an extra-small mobile screen. Go ahead and add the .<code>order<\/code> classes to the columns in just the second row of the grid (see above). <\/p>\n\n\n\n<p>Remember, Bootstrap elements are mobile-first, so the default setting for our column classes roughly corresponds with a standard mobile screen, or an extra-small breakpoint<a href=\"#footnote-7-1599\" id=\"note-7-1599\" rel=\"footnote\">7<\/a>. So when you see<code> order-2<\/code> in the first column you can read that as &#8220;on mobile\/extra-small screens this column will come second.&#8221; Next, you&#8217;ll see <code>order-sm-1<\/code> and that translates to &#8220;on small screens this column will come first.&#8221; <\/p>\n\n\n\n<p> Save everything and let&#8217;s look at a cool way to test that out. <\/p>\n\n\n\n<p>Refresh your Chrome browser window and pull up your inspector again<a href=\"#footnote-8-1599\" id=\"note-8-1599\" rel=\"footnote\">8<\/a>. Here&#8217;s a handy visual to walk you through the next couple steps. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2154\" height=\"1286\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM.png\" alt=\"\" class=\"wp-image-1678\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM.png 2154w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-300x179.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-1024x611.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-768x459.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-1536x917.png 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-2048x1223.png 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-12.04.54-PM-1568x936.png 1568w\" sizes=\"auto, (max-width: 2154px) 100vw, 2154px\" \/><\/figure>\n\n\n\n<p>Click the device tool bar indicated by the red circle. Then, select the iPhone X from the list of devices (the blue circle).<a href=\"#footnote-9-1599\" id=\"note-9-1599\" rel=\"footnote\">9<\/a> When viewing the screen as it would appear on an iPhone X we&#8217;re seeing how the layout looks at the extra-small breakpoint. <\/p>\n\n\n\n<p>Click the rotate button that&#8217;s indicated by the green circle. This will rotate the orientation of your screen. A mobile phone in landscape orientation roughly corresponds with the small breakpoint in Bootstrap&#8217;s grid. Using this tool you can see how your webpage looks on a variety of device types. <\/p>\n\n\n\n<p>What you should be seeing at this point is that we&#8217;ve fixed our ordering problem. When we&#8217;re looking at the screen on an extra-small device (i.e.: a mobile phone in portrait orientation) we now see alternating images and text. <\/p>\n\n\n\n<p>This is another great example of how Bootstrap&#8217;s grid makes it easy for us to build responsive designs that look awesome on different device types and screen sizes. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"offsetting\">Offsetting Columns <\/h3>\n\n\n\n<p><a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\/#offsetting-columns\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/layout\/columns\/#offsetting-columns\" target=\"_blank\" rel=\"noreferrer noopener\">Offsetting columns<\/a> is another tool we have when using Bootstrap&#8217;s grid. The idea here is that our row can always be divided into twelve columns, so we can alter where that column appears within the row by offsetting it by a certain value. This might sound confusing, but it&#8217;s really simple in practice.<\/p>\n\n\n\n<p>Let&#8217;s create another row at the bottom of our container. We&#8217;ll add one column, give it a class of <code>col-sm-8<\/code>, and add a &lt;p&gt; element with that same text from our other &lt;p&gt; elements. <\/p>\n\n\n\n<p>For the sake of this demonstration, close out of your inspector so you can view your full screen. You should see the new column with the text taking up three quarters<a href=\"#footnote-10-1599\" id=\"note-10-1599\" rel=\"footnote\">10<\/a> of the container width. <\/p>\n\n\n\n<p>What if we wanted to move that text over a bit? Maybe even center it? We could do that with offsetting. Add <code>offset-sm-2<\/code> to your existing column class so it looks like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"854\" height=\"86\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-11.11.00-PM.png\" alt=\"\" class=\"wp-image-1659\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-11.11.00-PM.png 854w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-11.11.00-PM-300x30.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-11.11.00-PM-768x77.png 768w\" sizes=\"auto, (max-width: 854px) 100vw, 854px\" \/><\/figure>\n\n\n\n<p>This is telling your browser to move the column to the right two units. Since the row can be split into twelve, this means that there will be two units, then the column which will take up eight units, and then the two leftover units to bring us to a total of twelve. <\/p>\n\n\n\n<p>You can use offsets to help create all sorts of interesting layouts! <\/p>\n\n\n\n<p>Note: Try testing out your page in the extra-small mobile layout again. Everything should stack neatly into vertical columns with not extra space. That&#8217;s because we&#8217;ve given the offset a &#8220;small&#8221; breakpoint! You can play around with different column widths and breakpoints to create different layouts for different devices. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"media\">Add a Media Query<\/h3>\n\n\n\n<p>As we discussed previously in our <a href=\"https:\/\/nmi.cool\/web\/media-queries\/\" target=\"_blank\" rel=\"noreferrer noopener\">media query lesson<\/a>, we can build media queries into our custom CSS to make sure our design looks great on both mobile and desktop devices. Let&#8217;s test that out in this exercise.<\/p>\n\n\n\n<p>Take a quick look back at our browser window as it would appear on a laptop or desktop (in other words, close your inspector if it&#8217;s open and expand your screen).  <\/p>\n\n\n\n<p>Let&#8217;s turn our attention to aesthetics for a moment add a little bit of spacing between our rows so that the Paris at dawn photo isn&#8217;t sitting on top of the second paragraph. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2278\" height=\"1266\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM.png\" alt=\"\" class=\"wp-image-1662\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM.png 2278w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-300x167.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-1024x569.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-768x427.png 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-1536x854.png 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-2048x1138.png 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.19.00-AM-1568x871.png 1568w\" sizes=\"auto, (max-width: 2278px) 100vw, 2278px\" \/><\/figure>\n\n\n\n<p>To do this we&#8217;ll add a margin to the row class by adding the following code to your CSS file. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1416\" height=\"176\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.04.49-PM.png\" alt=\"\" class=\"wp-image-1654\" style=\"width:660px;height:81px\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.04.49-PM.png 1416w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.04.49-PM-300x37.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.04.49-PM-1024x127.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-22-at-10.04.49-PM-768x95.png 768w\" sizes=\"auto, (max-width: 1416px) 100vw, 1416px\" \/><\/figure>\n\n\n\n<p>You&#8217;ll notice that we used the same relative length unit, rem, for our margin as we did for our font size. Again, that will help our website behave responsively to browser settings. <\/p>\n\n\n\n<p>Go ahead and save your changes and then refresh your browser window. At this point our layout looks pretty good in on a laptop or desktop, but when we use the inspect to look at our screen on an iPhone X, we see there&#8217;s room for improvement. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"898\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.43.01-AM.png\" alt=\"\" class=\"wp-image-1664\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.43.01-AM.png 430w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.43.01-AM-144x300.png 144w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n<\/div>\n\n\n<p>In particular, the text is a bit too big, and our columns need some space between them, just like our rows did in a bigger view. We&#8217;re going to use a media query to address these problems. <\/p>\n\n\n\n<p>On Bootstrap&#8217;s Layout Overview page there&#8217;s a <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/breakpoints\/\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/layout\/breakpoints\/\" target=\"_blank\" rel=\"noreferrer noopener\">section on media queries<\/a>. We&#8217;re looking for a query that says &#8220;When we&#8217;re looking at an extra small device (less than <code>576px<\/code>) make these changes.&#8221;<\/p>\n\n\n\n<p>Here&#8217;s the query we&#8217;re going to use: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1380\" height=\"142\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.40.20-AM.png\" alt=\"\" class=\"wp-image-1663\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.40.20-AM.png 1380w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.40.20-AM-300x31.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.40.20-AM-1024x105.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.40.20-AM-768x79.png 768w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><\/figure>\n\n\n\n<p> Remember that a media query is sort of like a stylesheet inside a stylesheet. It will come right at the bottom of our CSS document and needs to contain selectors and rules that will be applied when the conditions of the query are met\u2014 in other words, in this case, when the screen in less than <code>576px<\/code>. <\/p>\n\n\n\n<p>The font size will be easy to fix. We will set our <code>&lt;p&gt;<\/code> element&#8217;s font size to <code>1rem<\/code>, so that it&#8217;s a bit smaller on mobile view. Our code will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"262\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.49.46-AM.png\" alt=\"\" class=\"wp-image-1665\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.49.46-AM.png 1320w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.49.46-AM-300x60.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.49.46-AM-1024x203.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.49.46-AM-768x152.png 768w\" sizes=\"auto, (max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>The column margin will take a little more work. Specifically, we want the columns with the images to have a bottom margin of <code>1.5rem<\/code>. Let&#8217;s make that happen by creating a new class so we can apply that rule to those two particular columns. To create a new class we will simply add to the existing classes styling those columns. We&#8217;ll call the new class <code>mar-bottom<\/code> and apply it like this: <\/p>\n\n\n\n<p>The Paris at Dawn column will look like this: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"col-sm-4 <strong>mar-bottom<\/strong>\"&gt;\n     &lt;img src=\"img\/paris-dawn.jpg\" alt=\"Paris at dawn\" class=\"img-fluid rounded-circle\"&gt; \n                &lt;\/div&gt;<\/pre>\n\n\n\n<p>And the Paris at Night column will look like this: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"col-sm-4 order-1 order-sm-2 <strong>mar-bottom<\/strong>\"&gt;\n     &lt;img src=\"img\/paris-night.jpg\" alt=\"Paris at night\" class=\"img-fluid rounded-circle\"&gt;\n                &lt;\/div&gt;<\/pre>\n\n\n\n<p>That&#8217;s our HTML taken care of. Let&#8217;s add the new class to our media query.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1420\" height=\"446\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.56.24-AM.png\" alt=\"\" class=\"wp-image-1666\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.56.24-AM.png 1420w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.56.24-AM-300x94.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.56.24-AM-1024x322.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/Screen-Shot-2020-02-23-at-10.56.24-AM-768x241.png 768w\" sizes=\"auto, (max-width: 1420px) 100vw, 1420px\" \/><\/figure>\n\n\n\n<p>Save everything at take a look at your mobile view: the font should be a bit smaller and we now should have some space between our images and paragraph text\u2014 definitely and improvement! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>First, if you made to the end of this exercise, nice job! Not only are you dedicated to understanding responsive web design, you have also found an Easter egg! Go ahead and send me a screenshot of whatever you just created! <\/p>\n\n\n\n<p>We&#8217;re going to call it a day on this exercise, but there&#8217;s still a lot you can do on your own if you want to keep exploring! Maybe play around with the column margins a bit more, bring in another font for your paragraphs, or add some more Bootstrap components! <\/p>\n\n\n\n<p>Remember, you can revisit this page to refresh your memory on all the different topics that we covered in this exercise. <\/p>\n\n\n\n<p>Lastly, if things didn&#8217;t quite match up or you go stuck at some point, you can check your work against the finished code that is included on page 2. <\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-html\">Final HTML <\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;!-- Required meta tags --&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\n    &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\"&gt;\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Squada+One&amp;display=swap\" rel=\"stylesheet\"&gt;\n    &lt;link href=\"css\/custom.css\" rel=\"stylesheet\"&gt;\n\n    &lt;title&gt;Paris, France&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;header&gt;\n        &lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\"&gt;\n            &lt;div class=\"container-fluid\"&gt;\n            &lt;a class=\"navbar-brand\" href=\"#\"&gt;\n                &lt;img src=\"img\/paris-logo.png\" alt=\"Paris Logo\" height=\"24\"&gt; \n            &lt;\/a&gt;\n              &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt;\n                &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"&gt;\n                &lt;ul class=\"navbar-nav me-auto mb-2 mb-lg-0\"&gt;\n                &lt;li class=\"nav-item\"&gt;\n                    &lt;a class=\"nav-link active\" aria-current=\"page\" href=\"#\"&gt;Home&lt;\/a&gt;\n                &lt;\/li&gt;\n                &lt;li class=\"nav-item\"&gt;\n                    &lt;a class=\"nav-link\" href=\"#\"&gt;Link&lt;\/a&gt;\n                &lt;\/li&gt;\n                &lt;li class=\"nav-item dropdown\"&gt;\n                    &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n                    Dropdown\n                    &lt;\/a&gt;\n                    &lt;ul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"&gt;\n                    &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;li&gt;&lt;hr class=\"dropdown-divider\"&gt;&lt;\/li&gt;\n                    &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/li&gt;\n                &lt;li class=\"nav-item\"&gt;\n                    &lt;a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"&gt;Disabled&lt;\/a&gt;\n                &lt;\/li&gt;\n                &lt;\/ul&gt;\n                &lt;form class=\"d-flex\"&gt;\n                &lt;input class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"&gt;\n                &lt;button class=\"btn btn-outline-success\" type=\"submit\"&gt;Search&lt;\/button&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n    &lt;main&gt;\n        &lt;div class=\"jumbotron jumbotron-fluid\"&gt;\n            &lt;div class=\"container\"&gt;\n              &lt;h1 class=\"display-4\"&gt;Paris, France&lt;\/h1&gt;\n              &lt;p class=\"lead\"&gt;Paris is always a good idea.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div class=\"container\"&gt;\n              &lt;div class=\"row\"&gt;\n                  &lt;div class=\"col-sm-4 mar-bottom\"&gt;\n                    &lt;img src=\"img\/paris-dawn.jpg\" alt=\"Paris at dawn\" class=\"img-fluid rounded-circle\"&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div class=\"col-sm-8\"&gt;\n                    &lt;p&gt;For Paris is a total. Paris is the ceiling of the human race. The whole of this prodigious city is a foreshortening of dead manners and living manners. He who sees Paris thinks he sees the bottom of all history with heaven and constellations in the intervals. Paris has a capital, the Town-Hall, a Parthenon, Notre-Dame, a Mount Aventine, the Faubourg Saint-Antoine, an Asinarium, the Sorbonne, a Pantheon, the Pantheon, a Via Sacra, the Boulevard des Italiens, a temple of the winds, opinion; and it replaces the Gemoni\u00e6 by ridicule. Its majo is called \u201cfaraud,\u201d its Transteverin is the man of the faubourgs, its hammal is the market-porter, its lazzarone is the p\u00e8gre, its cockney is the native of Ghent. Everything that exists elsewhere exists at Paris. &lt;\/p&gt;\n                &lt;\/div&gt;\n\n              &lt;\/div&gt;\n\n              &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-sm-8 order-2 order-sm-1\"&gt;\n                    &lt;p&gt;For Paris is a total. Paris is the ceiling of the human race. The whole of this prodigious city is a foreshortening of dead manners and living manners. He who sees Paris thinks he sees the bottom of all history with heaven and constellations in the intervals. Paris has a capital, the Town-Hall, a Parthenon, Notre-Dame, a Mount Aventine, the Faubourg Saint-Antoine, an Asinarium, the Sorbonne, a Pantheon, the Pantheon, a Via Sacra, the Boulevard des Italiens, a temple of the winds, opinion; and it replaces the Gemoni\u00e6 by ridicule. Its majo is called \u201cfaraud,\u201d its Transteverin is the man of the faubourgs, its hammal is the market-porter, its lazzarone is the p\u00e8gre, its cockney is the native of Ghent. Everything that exists elsewhere exists at Paris.&lt;\/p&gt;\n                &lt;\/div&gt;\n\n                &lt;div class=\"col-sm-4 order-1 order-sm-2 mar-bottom\"&gt;\n                    &lt;img src=\"img\/paris-night.jpg\" alt=\"Paris at night\" class=\"img-fluid rounded-circle\"&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-sm-8 offset-sm-2\"&gt;\n                    &lt;p&gt;For Paris is a total. Paris is the ceiling of the human race. The whole of this prodigious city is a foreshortening of dead manners and living manners. He who sees Paris thinks he sees the bottom of all history with heaven and constellations in the intervals. Paris has a capital, the Town-Hall, a Parthenon, Notre-Dame, a Mount Aventine, the Faubourg Saint-Antoine, an Asinarium, the Sorbonne, a Pantheon, the Pantheon, a Via Sacra, the Boulevard des Italiens, a temple of the winds, opinion; and it replaces the Gemoni\u00e6 by ridicule. Its majo is called \u201cfaraud,\u201d its Transteverin is the man of the faubourgs, its hammal is the market-porter, its lazzarone is the p\u00e8gre, its cockney is the native of Ghent. Everything that exists elsewhere exists at Paris.&lt;\/p&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n    &lt;\/main&gt;\n\n    &lt;!-- Optional JavaScript; choose one of the two! --&gt;\n\n    &lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD\/SeCtmISkJkNUaaKMoLD0\/\/ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n\n    &lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;\n    &lt;!--\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.2\/dist\/umd\/popper.min.js\" integrity=\"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    --&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-css\">Final Custom CSS<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">h1 {\n    font-family: 'Squada One', cursive;\n}\n\np {\n    font-size: 1.2rem;\n}\n\n.btn-outline-success {\n    color: #ffdd5c;\n    border-color: #ffdd5c;\n}\n\n.btn-outline-success:hover {\n    color: #0d6efd;\n    background-color: #ffdd5c;\n    border-color: #ffdd5c;\n}\n\n.row {\n    margin-bottom: 2rem;\n}\n\n@media (max-width: 575.98px) {\n    p{\n        font-size: 1rem;\n    }\n\n    .mar-bottom {\n        margin-bottom: 1.5rem;\n    }\n}\n<\/pre>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-1599\" class=\"footnote\"><p>If you get lost you can check out the <a rel=\"noreferrer noopener\" href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise\/2#final-html\" target=\"_blank\">finished HTML<\/a> and compare it to what you&#8217;ve created, but try to save that as a last resort!<a href=\"#note-1-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><li id=\"footnote-2-1599\" class=\"footnote\"><p> Remember, containers contain rows which contain columns<a href=\"#note-2-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-2.footnote--><li id=\"footnote-3-1599\" class=\"footnote\"><p> Need a refresher? Read up on the <a href=\"https:\/\/nmi.cool\/web\/bootstrap#grid\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap grid<\/a>.<a href=\"#note-3-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-3.footnote--><li id=\"footnote-4-1599\" class=\"footnote\"><p>You can use the Preview function on a Mac (or any image editing software) to crop a rectangular image into a square.<a href=\"#note-4-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-4.footnote--><li id=\"footnote-5-1599\" class=\"footnote\"><p> Got it? If not, scroll to &#8220;<a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/navbar\/#brand\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.1\/components\/navbar\/#brand\" target=\"_blank\" rel=\"noreferrer noopener\">Brand<\/a>&#8221; and stop when you see &#8220;Adding images to the <code>navbar-brand<\/code>\u2026&#8221;<a href=\"#note-5-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-5.footnote--><li id=\"footnote-6-1599\" class=\"footnote\"><p> Why is the order important? Because your browser reads your document from top to bottom. First it needs to load the bootstrap.css stylesheet, then the Google Font stylesheet, and the finally the custom.css stylesheet.<a href=\"#note-6-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-6.footnote--><li id=\"footnote-7-1599\" class=\"footnote\"><p> Revisit the the different breakpoints by checking out the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/grid\/#grid-options\" target=\"_blank\" rel=\"noreferrer noopener\">Grid Options table<\/a><a href=\"#note-7-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-7.footnote--><li id=\"footnote-8-1599\" class=\"footnote\"><p> right click and select &#8220;inspector&#8221;<a href=\"#note-8-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-8.footnote--><li id=\"footnote-9-1599\" class=\"footnote\"><p>You&#8217;ll see in the device drop down that you can test the layout on a variety of mobile devices; feel free to try some out, but come back to iPhone X for this example.<a href=\"#note-9-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-9.footnote--><li id=\"footnote-10-1599\" class=\"footnote\"><p>Or 8\/12ths, to stick with our grid<a href=\"#note-10-1599\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-10.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>This exercise is going to walk you through a simple Bootstrap webpage that will take full advantage of Bootstrap&#8217;s responsive components and custom CSS to create a finished product that is fully optimized for both a desktop and mobile layout. We&#8217;re going to cover a lot of ground, so get ready! There are two different &hellip; <a href=\"https:\/\/nmi.cool\/web\/responsive-optimization-exercise\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Responsive Optimization Exercise<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1599","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=1599"}],"version-history":[{"count":17,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1599\/revisions"}],"predecessor-version":[{"id":4482,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1599\/revisions\/4482"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}