CODEWITHSUNDEEP
csstwitter-bootstrap
Mitch
Mitch

Reputation: 704

Bootstrap 4 - 3 Column Collapses on Mobile View

I have 3 columns in my footer however when I enter mobile view. The horizontal columns become stacked vertically. How can I keep them as 3 columns horizontally even when in mobile viewport?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid footer">
      <div class="row">
        <div class="col-xs-4 col-sm-6 col-md-7 col-lg-8">
          <p class="copyright text-left pl-3">Street Scents 2018&copy;</p>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 info">
          <p class="nav-link-title">SOCIAL MEDIA</p>
            <ul class="links" href="https://www.instagram.com/streetscents" target="_blank"><i class="fab fa-instagram"></i> Instragram</ul>
            <ul class="links" href="https://twitter.com/STREETSCENTS" target="_blank"><i class="fab fa-twitter"></i> Twitter</ul>
            <ul class="links" href="https://www.youtube.com/user/FRAGRANCEFANATIC1" target="_blank"><i class="fab fa-youtube"></i> YouTube</ul>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 info">
          <p class="nav-link-title">CONTACT</p>
            <ul class="links" href="mailto:[email protected]?Subject=Hello">[email protected]</ul>
        </div>
      </div>
    </div>

Upvotes: 1

Views: 312

Answers (1)

mdlanglais
mdlanglais

Reputation: 351

Add .col-4 to each of your three columns. Bootstrap 4 introduces an additional breakpoint tier for smaller than small devices (< 576px). That should prevent stacking on mobile devices.

Upvotes: 1

Related Questions