title: Bootstrap 4 column layout not displaying horizontally in Shopify theme footer
body: <p>I'm customizing the Shopify Boundless theme. I've added Bootstrap 4 via a CDN and I've used it on other areas of the site with success. The footer, however, will not display this 4 column markup horizontally. It only displays vertically. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3"&gt;
              &lt;div class="row"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/1022/3186/1371/files/tag- 
  logo_white.svg?500" width="100%"&gt;
              &lt;/div&gt;
              &lt;div="row"&gt;
                  &lt;ul&gt;
                      {% if settings.social_twitter_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_twitter_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform:
  'Twitter' }}"&gt;
                              &lt;span class="icon icon-twitter" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;Twitter&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %} {% if settings.social_facebook_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_facebook_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform: 
  'Facebook' }}"&gt;
                              &lt;span class="icon icon-facebook" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;Facebook&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %} {% if settings.social_instagram_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_instagram_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform:
  'Instagram' }}"&gt;
                              &lt;span class="icon icon-instagram" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;Instagram&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %} {% if settings.social_youtube_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_youtube_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform: 
  'YouTube' }}"&gt;
                              &lt;span class="icon icon-youtube" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;YouTube&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %} {% if settings.social_vimeo_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_vimeo_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform:
  'Vimeo' }}"&gt;
                              &lt;span class="icon icon-vimeo" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;Vimeo&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %} {% if settings.social_fancy_link != blank %}
                      &lt;li&gt;
                          &lt;a href="{{ settings.social_fancy_link | escape }}" title="{{
  'layout.footer.social_platform' | t: name: shop.name, platform:
  'Fancy' }}"&gt;
                              &lt;span class="icon icon-fancy" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="visually-hidden"&gt;Fancy&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      {% endif %}
                  &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- row --&gt;
      &lt;/div&gt;
      &lt;!-- col --&gt;
      &lt;div class="col-lg-3"&gt;
          &lt;h3 style="color: white; font-size: 19px;"&gt;ABOUT&lt;/h3&gt;
          &lt;ul class="footer-list"&gt;
              &lt;li&gt;About&lt;/li&gt;
              &lt;li&gt;Blog&lt;/li&gt;
              &lt;li&gt;Events&lt;/li&gt;
              &lt;li&gt;Press&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- col --&gt;
  
      &lt;div class="col-lg-3"&gt;
          &lt;h3 style="color: white; font-size: 19px;"&gt;SHOP&lt;/h3&gt;
          &lt;ul class="footer-list"&gt;
              &lt;li&gt;Books&lt;/li&gt;
              &lt;li&gt;Posters&lt;/li&gt;
              &lt;li&gt;Limited Edition&lt;/li&gt;
              &lt;li&gt;Open Edition&lt;/li&gt;
              &lt;li&gt;Misc&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- col --&gt;
  
      &lt;div class="col-lg-3"&gt;
          &lt;h3 style="color: white; font-size: 19px;"&gt;POLICIES &amp; FAQS&lt;/h3&gt;
          &lt;ul class="footer-list"&gt;
              &lt;li&gt;FAQs&lt;/li&gt;
              &lt;li&gt;Shipping Policies&lt;/li&gt;
              &lt;li&gt;Return Policies&lt;/li&gt;
              &lt;li&gt;Contact Us&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- col --&gt;
  &lt;/div&gt;
  &lt;!-- row --&gt;
  &lt;div class="row copyright"&gt;
      &lt;div class="col-lg-12 copyright-wrap"&gt;
          &lt;span class="site-footer__copyright"&gt;&amp;copy; {{ 'now' | date: '%Y'
  }}, &lt;a href="/"&gt;{{ shop.name }}&lt;/a&gt;. {{ powered_by_link }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- col --&gt;
  &lt;/div&gt;
  &lt;!-- row --&gt;
  &lt;/div&gt;
  &lt;!-- container --&gt;
  </code></pre>
  
  <p>I expected this markup to display 4, equal-width columns horizontally on larger viewports, but instead, the browser will only display the columns stacked.</p>