CODEWITHSUNDEEP
cssbootstrap-4
Leff
Leff

Reputation: 1298

Css Bootstrap 4 - how to have vertical tabs on wider screens and horizontal on smaller

I am trying to make tabs that would be vertical on wider screens and horizontal on smaller screens, but not sure how can I achieve that. I have tried with adding flex-md-column and flex-lg-column to nav tabs:

<ul class="nav nav-tabs flex-md-column flex-lg-column" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-expanded="true"><i class="ion-compose"></i> Info</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="stats-tab" data-toggle="tab" href="#stats" role="tab" aria-controls="stats"><i class="ion-arrow-graph-up-right"></i> Statistics</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"><i class="ion-email"></i> Contact</a>
  </li>
</ul>

But, then the tabs take the full width, and the tabs content is pushed below. How can I fix that, so that the tabs take just the width they need, and the content can then go to the top, on the side of the nav-tabs?? I have tried that with setting the fixed width for nav-items, but, that didn't work.

Upvotes: 1

Views: 4016

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

All you need to do is combine the appropriate flex classes and add a little padding here and there. ;)

Make sure to take a closer look at the following pages. Bootstrap actually has a great documentation page.

Flex and Spacing

Here is an example:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container d-md-flex flex-md-row">
  <ul class="nav nav-tabs d-md-inline-flex align-self-md-start flex-md-column" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
    </li>
  </ul>
  <div class="tab-content py-3 px-md-3 py-md-0" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

Upvotes: 3

Related Questions