how-to-use-bootstrap-grid.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Use the Bootstrap Grid</title>
    <link meta="description" content="Learn How to use the Bootstrap Grid rows columns and containers for layouts with Bootstrap 4">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ThemesGuide">
    <meta name="twitter:creator" content="@ThemesGuide">
    <meta name="twitter:title" content="Bootstrap 4 Themes and Templates">
    <meta name="twitter:description" content="Learn How to use the Bootstrap Grid rows columns and containers for layouts">
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-103606808-1', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="https://www.codeply.com/js/embed.js"></script>
  </head>
  <body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
    <nav class="navbar navbar-custom navbar-dark fixed-top navbar-expand-md" role="navigation">
    <div class="container">
        <a class="navbar-text page-scroll font-weight-bold text-uppercase py-3" href="http://themes.guide">
        <span>Themes.guide</span>
        </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-md-auto">
                <li class="nav-item"><a class="page-scroll active nav-link pr-3" href="./">Bootstrap 4</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" target="_ext" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" title="Bootstrap 4 themes collection" href="http://themes.guide/#freebies">Free Themes</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-0" href="http://themes.guide/#themes">Pro Themes</a></li>
            </ul>
        </div>
    </div>
</nav> 
    <div class="container pt-5">
        <div class="row mt-5">
            <div class="col-md-12">
                                <h4>
                    <a href="how-to.html">
                    <img src="./assets/howto/bootstrap-punchout.svg" alt="How to Bootstrap 4" class="bg-primary border rounded border-primary mr-2 mb-1" style="width:30px;height:30px">
                    How to... Bootstrap</a>
                </h4>
            </div>
            <div class="col-md-12 pt-5 text-center">
                <h1 class="display-4">How to Use the Bootstrap Grid</h1>
                <h1>The Right Way</h1>
            </div>
        </div>
    </div>
    
    <section id="howto">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-10 mx-auto">
                    
                    <p class="lead">
                    The <a href="https://getbootstrap.com/docs/4.1/layout/grid/" target="_new">Bootstrap Grid System</a> 
                    is used for layout, specifically <strong>Responsive Layouts</strong>. Understanding how it works is <em>vital</em> to understanding Bootstrap. 
                    The Grid is made up of groupings of <strong>Rows & Columns</strong> inside one or more <strong>Containers</strong>.
                    </p>
                    
                    <p class="lead">The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and 
                    reference the <code>"bootstrap-grid.css"</code> which contains the Grid and Flexbox classes. More info on only using the 
                    <a href="http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files" target="_new">Bootstrap Grid CSS</a> is here in the docs.
                    </p>
                    
                    <hr class="my-5">
                    
                    <h4>Basic example of using the Grid:</h4>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="container"&gt; 
               &lt;div class="row"&gt;
                  &lt;div class="col"&gt;I'm your content inside the grid!&lt;/div&gt; 
               &lt;/div&gt;
            &lt;/div&gt;
                    </code></pre>
                    
                    This gives us one big “column” horizontally across the viewport…
                    
                    <img src="./assets/howto/1col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
                    
                    <h4>
                        2 Columns…
                    </h4>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="container"&gt; 
               &lt;div class="row"&gt;
                  &lt;div class="col"&gt;Left column&lt;/div&gt; 
                  &lt;div class="col"&gt;Right column&lt;/div&gt; 
               &lt;/div&gt;
            &lt;/div&gt;
                    </code></pre>
                
                    <img src="./assets/howto/2col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
                    
                    <h4>
                        3 Columns…
                    </h4>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="container"&gt; 
               &lt;div class="row"&gt;
                  &lt;div class="col"&gt;Left column&lt;/div&gt; 
                  &lt;div class="col"&gt;Middle column&lt;/div&gt; 
                  &lt;div class="col"&gt;Right column&lt;/div&gt; 
               &lt;/div&gt;
            &lt;/div&gt;
                    </code></pre>
                    
                    <img src="./assets/howto/3col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
                    
                    <hr class="my-5 border-dark">
                    
                    <p class="h4 mb-3">Basic Grid concepts are <em>quickly</em> understood, but you may be wondering why all of this 
                    HTML markup is neccessary. You might have some questions like…</p>

                    <h5>Why do I need a Container?</h5>
                    <h5>Can I make one column wider than the others?</h5>
                    <h5>Do I need to use the Row?</h5>
                    
                    <div class="w-100 py-4"></div>
                    
                    <p class="lead">I will address Grid questions like these a little further down. 
                    But, first I want to take a step back to explain something very important about using the Grid. 
                    Understanding the “Rules of the Grid” will save you a lot of time and frustration. 
                    Read them carefully…</p>
                    
                    <hr class="my-5" id="gridrules">
                    
                    <h1>The Rules of the Grid:</h1>
                    
                    <h3>1. Columns <em>must</em> be the immediate child of a Row.</h3>
                    <h3>2. Rows are <em>only</em> used to contain Columns, nothing else.</h3>
                    <h3>3. Rows should be placed inside a Container.</h3>
                    
                    <div class="w-100 py-4"></div>
                    
                    <p class="lead">Those rules are very IMPORTANT. The Rows & Columns always work together, and you should never have one without the other.
                    Bad stuff will happen if you don’t follow those 3 simple Grid rules, exactly. I’ve answered countless Bootstrap questions 
                    on Stack Overflow by simply applying those rules. At first this might sound complicated, but it’s really easy once you understand how the Grid works.</p>
                    
                    <hr class="my-5">
                    
                    <h4>There's a <em>Right Way</em> to Use the Bootstrap Grid...</h4>
                    
                    <hr class="border-dark my-5">
                    
                    <h1>Container</h1>
                    
                    <p class="lead">
                    In the basic examples before you may have noticed that I used the <code>.container</code> class to wrap the <code>.row</code>. 
                    The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid.</p>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="container"&gt;  
               &lt;div class="row"&gt;  
                  &lt;div class="col">I'm content inside the grid!&lt;/div&gt; 
               &lt;/div&gt;  
            &lt;/div&gt; 
                    </code></pre>
                    
                    <p class="lead">
                    The Container can be used to hold any elements and content. It’s not only used for the 
                    Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:</p>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="container"&gt; 
               &lt;h2&gt; My Heading&lt;/h2&gt;  
               &lt;div class="row"&gt;  
                  &lt;div class="col"&gt; I'm content inside the grid!&lt;/div&gt;  
               &lt;/div&gt; 
            &lt;/div&gt; 
                    </code></pre>
                    
                    <p class="lead">
                    At first, the Container may seem trivial or unnecessary, but it’s very important to <strong>control 
                    width</strong> of the layout. The Container is also used to <strong>evenly align the left and right edges</strong> of the 
                    layout within the browser’s viewport.</p>
                    
                    <p class="lead">
                    Bootstrap 4 has <a target="_new" rel="nofollow" href="http://getbootstrap.com/docs/4.1/layout/overview/#containers">2 types of Containers</a>. In my examples I used <code>.container</code>, but there is also the
                    full-width <code>.container-fluid</code>. You can use either one:</p>
                    
                    <h5>1 — Fixed-width container to center your layout in the middle:</h5>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
    &lt;div class="container"&gt; &lt;/div&gt; 
    </code></pre>
                    
                    
                    <h5>2 — Full-width container for a layout the spans the entire width:</h5>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
    &lt;div class="container-fluid"&gt; &lt;/div&gt; 
    </code></pre>
                    
                    <p class="lead">
                    The <code>.container</code> scales down in width responsively (as the screen width narrows) so that eventually 
                    it becomes full-width like the <code>.container-fluid</code> on smaller devices.</p>
                    
                    <p class="lead">
                    <strong>Note:</strong> A Container can be used to contain any content, not just the Grid Rows & Columns. But, if you 
                    do utilize the Grid Rows & Columns, the Rows should be placed inside a Container. 
                    <a target="_new" rel="nofollow" href="">Try the Container demo on Codeply</a>
                    </p>
                    
                    <p class="lead">
                    When utilizing the Grid, one more Rows will be placed inside the Container. You can have multiple Rows in a 
                    Container, and you can have multiple Containers on one page. It all depends on what layout you’re trying to 
                    accomplish, but don’t get too concerned with that yet.</p>
                    
                    <h5 class="my-4">It’s important that a Container is used to contain grid Rows (.row).</h5>

                    <p class="lead">
                    Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. 
                    This is to keep content evenly aligned on the edges of the layout. If you don’t put a Row in a Container, the Row will overflow it’s 
                    container, causing an undesirable horizontal scroll.</p>
                    
                    <hr class="my-5 bg-dark">
                    
                    <h1>Rows & Columns</h1>
                    
                    <p class="lead">
                    Notice that I've grouped "Rows & Columns" together in a single section for this article. This is because you can't have one without the 
                    other as explained earlier in the "<a href="#gridrules">Rules of the Grid</a>".<p>
                    
                    <p class="lead">
                    For a while now I've wished that the Bootstrap .row wasn't actually named "row". 
                    The name "row" is often misleading, and obscures the actual purpose of the <code>.row</code>.
                    When you think "row", you probably think <em>horizontal line</em>, which is okay, BUT, it's better to think of the 
                    <code>.row</code> simply as a <em>parent</em> of columns.</p>


                    <p class="lead">
                    Think of the Row as a group of Columns
                    This is because columns inside the <code>.row</code> aren't always laid-out horizontally across the viewport. Some times we want the column layout to be horizontal, 
                    while other times we want the columns to layout vertically down the viewport. The concept of horizontal vs. vertical layout is the essence of 
                    Responsive Design. The sole purpose of the "row" is to contain 1 or more "columns".</p>
                                        
                    <h4>DON'T PUT CONTENT DIRECTLY INSIDE THE ROW!</h4>
                    
                    <p class="lead">Again, the Row's <em>only</em> purpose is to contain Coumns.</p>
                    
                    <pre class="bg-dark text-white rounded mb-5">
        ⛔
        &lt;div class="row"&gt;
           This is very bad, wrong way, no bueno!!
        &lt;/div&gt;
        &lt;div class="row"&gt;
           &lt;p&gt;This is also very bad, the wrong way!!&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
           &lt;h2&gt;No headings either! This is the wrong way!!&lt;/h2&gt;
        &lt;/div&gt;
                    </pre>
                    
                    <p class="lead">Columns, and <em>only</em> columns, are placed inside the Row.</p>
                    
                    
                    <pre class="bg-dark text-white rounded mb-5">
        ✅
        &lt;div class="row"&gt;
           &lt;div class="col">Happy :-) This is the right way.&lt;/div&gt;
        &lt;/div&gt;
                    </pre>
                    
                    <p class="lead">
                    It's also important to mention that the <code>.row</code> is <code>display:flex</code>. As Flexbox children, 
                    the Columns in each row are the same height. Because of Flexbox, horizontal and vertical alignment (align right, center, bottom, etc..) 
                    is easily accomplished using Bootstrap 4's Flex and Auto-margin Utility classes.
                    Now it's time to look deeper at Rows & Columns, and <em>exactly</em> how they work together.
                    There are different "types" of Columns, and different ways to use them in your layout. They are magic.
                    </p>
                    
                    <hr class="my-5 border-dark">
                    
                    <h3>Happiness is... Columns.</h3>
                    
                    <p class="lead">All the things Bootstrap 4 Columns can do...</p>
                    
                    <ul class="mb-5">
                    <li>Create horizontal divisions across the viewport.</li>
                    <li>Can have different defined widths.</li>
                    <li>Can change in width at different screen widths.</li>
                    <li>Layout horizontally left-to-right, then vertically up-and-down.</li>
                    <li>Can change position (re-order) relative to siblings in the same row.</li>
                    <li>Are the same height as their siblings in the same row.</li>
                    <li>Can "grow" or "shrink" in width.</li>
                    <li>Can automatically "wrap" or "stack" vertically as needed, or at different widths.</li>
                    <li>Can contain more Rows & Columns__ this is called "nesting".</li>
                    </ul>
                
                    <p class="lead">All you need to know about Bootstrap Columns...</p>
                    
                    <p>
                    Columns create horizontal divisions across the viewport. 
                    The space between the columns is called the "gutter".
                    </p>
                    
                    <img src="./assets/howto/cols.png" class="d-block img-fluid mx-auto my-4" alt="Columns 1">
                    
                    <p>
                    The classic Bootstrap grid has 12 column units:
                    </p>
                    <img src="./assets/howto/cols2.png" class="d-block img-fluid mx-auto my-4" alt="Columns 2">
                    
                    <blockquote class="small blockquote">
                        <b>Note for Dummies:</b> Columns aren't actually light pink. That is only used for you to see the left/right boundaries of the Columns. 
                        In most cases you're not going to use all 12 individual columns as illustrated above. Instead you'll be using some 
                        combination of the 12 to contain page content…
                    </blockquote>
                    
                    <p>
                    So, the columns can be evenly divided up into factors of 12. For example, 6 columns (12/6 = 2):
                    </p>
                    <img src="./assets/howto/cols3.png" class="d-block img-fluid mx-auto my-4" alt="Columns 3">
                    
                    <p>
                    And, you can do the math…
                    </p>
                    
                    <img src="./assets/howto/cols4.png" class="d-block img-fluid mx-auto my-4" alt="Columns 4">
                    
                    <p>
                    The columns can be split-up using <em>any</em> part of the 12 units. And, it's okay to use <em>less than 12</em>. It's also okay to use <em>more than 12</em> which I'll show you later.
                    </p>
                    <img src="./assets/howto/cols5.png" class="d-block img-fluid mx-auto my-4" alt="Columns 5">
                    
                    <p>
                        With all of this flexibility, the layout possibilities are seemingly endless…
                    </p>
                    <img src="./assets/howto/cols6.png" class="d-block img-fluid mx-auto my-4" alt="Columns 6">
                    
                    <hr class="my-5 border-dark">
                    
                    <p class="lead pb-3">
                        But, the Grid is not <em>always</em> about 12. Thanks to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" target="_new" rel="nofollow">Flexbox</a>, 
                        Bootstrap 4 has a new <a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns" target="_new" rel="nofollow">"Auto-layout" Columns</a>. 
                        These unit-less columns give you even more <em>flexibility</em> when it comes to designing layouts.
                    </p>
                    
                    <div data-codeply="6rPBFWFNPS" data-codeply-height="850px"></div>
                    
                    <p class="lead mt-5">
                    Now you know how to use Columns to create a horizontal layout. But wait... there’s more! Let’s talk about some fancier things Columns can do.
                    </p>
                    
                    <p>
                    As you saw before, Columns can be different widths:
                    </p>
                    <img src="./assets/howto/cols7.png" class="d-block img-fluid mx-auto my-4" alt="Columns 7">
                    
                    <p>
                    Did you know that, Column width can <b><em>change</em> depending on screen width</b>?
                    </p>
                    <img src="./assets/howto/cols8.png" class="d-block img-fluid mx-auto my-4" alt="Columns 8">
                    
                    <p class="lead">
                        This is called <b>Responsive Design</b>, and I will tell you exactly how it works a very soon.
                        But, first things first, I need to finish telling you about Columns. Remember before when I said 
                        "<b>It's okay to use more than 12 Columns in a Row</b>"?
                    </p>
                        
                    <p>
                        Columns in the same Row layout horizontally across, and then stack vertically down. This vertical "stacking" or "wrapping" 
                        occurs when the Column units in a single Row exceed 12. This is known as "Column Wrapping"…
                        Columns in the same Row wrap to the next line every 12 units:
                    </p>
                    <img src="./assets/howto/cols9.png" class="d-block img-fluid mx-auto my-4" alt="Columns 9">
                    
                    <p>
                    Column width and “wrapping” can be controlled using different Responsive Grid Tiers (a.k.a “Grid Breakpoints”):
                    </p>
                    <img src="./assets/howto/cols13.png" class="d-block img-fluid mx-auto my-4" alt="Columns responsive grid">
                    
                    <p>
                    Columns can change position (re-order) relative to siblings in the same Row:
                    </p>
                    <img src="./assets/howto/cols11.png" class="d-block img-fluid mx-auto my-4" alt="Columns 11">
                    
                    <p>
                    Columns can contain baby Rows & Columns. This is called “Nesting”:
                    </p>
                    <img src="./assets/howto/cols14.png" class="d-block img-fluid mx-auto my-4" alt="Columns nesting">
                    
                    <p>
                    Columns can “grow” or “shrink” in width. These are <a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns" target="_new" rel="nofollow">Auto-layout</a> Columns:
                    </p>
                    <img src="./assets/howto/cols12.png" class="d-block img-fluid mx-auto my-4" alt="Columns grow and shrink">
                    
                    <hr>
                    
                    <h3>
                        Now that you understand the basics of using Bootstrap’s Grid System, next I will show you what 
                        the <code>sm</code>, <code>-md</code>, <code>-lg</code>, and <code>-xl</code> mean. I will explain more 
                        about how to use the Grid for <b>Responsive Design</b>.
                    </h3>
                    
                </div>
                <div class="col-sm-10 mx-auto mt-5 py-4 border-top">
                    <div class="row">
                        <div class="col-sm mr-auto">
                            <a href="how-to-use-bootstrap-css.html">Prev: How to Use Bootstrap CSS</a>
                        </div>
                        <div class="col-sm-auto text-right">
                            <a href="how-to-responsive-design-with-bootstrap.html">Next: How to Responsive Design with Bootstrap</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block">
                    <h3 class="text-center">How can we help you?</h3>
                </div>
                <div class="modal-body">
                    <form id="contactForm" role="form" method="post">
                        <div class="form-group">
                            <label for="inputEmail" class="col-md-2 form-control-label">Email</label>
                            <div class="col-md-12">
                                <input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage" class="col-md-2 form-control-label">Message</label>
                            <div class="col-md-12">
                                <textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xl-12">
                                <button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block text-center">
                    <h3>Thank you!</h3>
                    <h6>We'll be in touch</h6>
                </div>
            </div>
        </div>
    </div>
        <footer id="footer" class="bg-dark text-white">
        <div class="container pt-3">
            <div class="row">
                <div class="col-6 col-md-6 col-lg-3 column">
                    <h6>Information</h6>
                    <ul class="list-unstyled">
                        <li><a href="http://themes.guide/#freebies">Free Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#themes">Pro Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#about">Benefits</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column text-lg-left text-right">
                    <h6>Tools</h6>
                    <ul class="list-unstyled">
                        <li><a href="https://themestr.app" title="Custom Bootstrap theme creator - SASS to CSS">Themestr.app</a>
                        </li>
                        <li><a href="http://bootstrap4.guide" title="Learn about Bootstrap 4">Bootstrap4.guide</a>
                        </li>
                        <li><a href="http://www.codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column">
                    <h6></h6>
                </div>
                <div class="col-6 col-lg-3 column text-right">
                    <h6>Follow</h6>
                    <ul class="nav float-right">
                        <li><a class="nav-link px-1" href="//twitter.com/ThemesGuide" title="@ThemesGuide"><i class="fa fa-3x ion-logo-twitter"></i></a></li>
                        <li><a class="nav-link px-1" href="https://github.com/ThemesGuide/bootstrap-themes" title="Star on GitHub"><i class="fa fa-3x ion-ios-star-outline"></i></a></li>
                        <li><a class="nav-link pl-1 pr-0" href="https://github.com/ThemesGuide" title="Follow on GitHub"><i class="fa fa-3x ion-logo-github"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container pt-5">
            <p class="small text-right">Made with ♥ by <a class="text-white" href="http://themes.guide">Themes.guide</a> ©2018</p>
        </div>
    </footer>
    <!--scripts loaded here-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  </body>
</html>