Twitter Bootstrap Question posted in

How to responsive bootstrap tab – Twitter bootstrap

I’m trying to develop myself just on bootstrap and I wonder that how to create boostrap tab to responsive without plugin and I found a few plugin for tab to responsive but I want to learn how can I make it without plugin?

for example as image (it can be like this)
enter image description here

.myTab{
  margin:70px;
  width:700px;
}
<html lang="en">
<head>
  <meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  
  <div class="myTab">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <h2>Home</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <h2>Profile</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <h2>Messages</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      <h2>Settings</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p>
    </div>
  </div>

</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Tags:

3

Answers


  1. 0

    Don’t give any width allow bootstrap to set it or use media queries in css. Alternatively use bootstrap grid like col-lg-12 or something which fits. you can also use .container class which sets the width to 800px and is responsive too.

    Login or Signup to reply.
  2. 0

    What about taking the float left off of the tab items for the size you want to change it

    @media screen and (max-width: 767px) {
    .nav-tabs>li {
        float: none;
    }
}
    Login or Signup to reply.
  3. 0

    I created this one here code https://jsfiddle.net/zrss7hor/2/ each time you resize your browser the tabs will adapt it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search