CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5566

Bootstrap's Tabs are not aligning to center

I want to align the tab list to center. As you can see in the image below it is shifted to the left. Bootstrap class center-block is already included but still it doesn't work. Please Help me!!! Tab list is shifted left

Here's my HTML of my code:-

<ul class="nav nav-tabs center-block" role="tablist">
                        <!-- Schedule  -->
                        <li role="presentation" class="active">
                            <a href="#" aria-controls="dem" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Schedule</span>
                            </a>
                        </li>
                        <!-- Resource  -->
                        <li role="presentation">
                            <a href="#" aria-controls="resource" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Resource</span>
                            </a>
                        </li>
                        <!-- Automation  -->
                        <li role="presentation">
                            <a href="#" aria-controls="automation" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Automation</span>
                            </a>
                        </li>
                        <!-- Customize -->
                        <li role="presentation">
                            <a href="#" aria-controls="customize" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Customize</span>
                            </a>
                        </li>
                    </ul>

ANd here's my CSS-

.ilpFeatureSection .nav-tabs {
    border-bottom: none
}

@media(min-width:480px) {
    .ilpFeatureSection .nav-tabs {
        width: 390px
    }
}

@media(min-width:768px) {
    .ilpFeatureSection .nav-tabs {
        width: 600px
    }
}

@media(min-width:992px) {
    .ilpFeatureSection .nav-tabs {
        width: 800px
    }
}

@media(min-width:1200px) {
    .ilpFeatureSection .nav-tabs {
        width: 1000px
    }
}

Thanks :)

Upvotes: 0

Views: 1156

Answers (4)

dulaj sanjaya
dulaj sanjaya

Reputation: 1340

Add container and make nav-justified. Then try it in full page

.ilpFeatureSection .nav-tabs {
    border-bottom: none
}

@media(min-width:320px) {
    .nav-tabs.nav-justified>li{
        width:25% !important;
      float:left !important;
     
   
    }
 
}

@media(min-width:480px) {
    .nav-tabs.nav-justified>li{
        width:25% !important;
      float:left !important;
     
   
    }
 
}

@media(min-width:768px) {
    .nav-tabs.nav-justified>li {
      width:1% !important;
      float:none !important;
    }
}

@media(min-width:992px) {
    .nav-tabs.nav-justified>li {
       width:1% !important; 
      float:none !important;
    }
}

@media(min-width:1200px) {
    .nav-tabs.nav-justified>li {
       width:1% !important; 
      float:none !important;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
                        <!-- Schedule  -->
                        <li role="presentation" class="active">
                            <a href="#" aria-controls="dem" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                              <br/>
                                <span>Schedule</span>
                              <br/>
                            </a>
                        </li>
                        <!-- Resource  -->
                        <li role="presentation">
                            <a href="#" aria-controls="resource" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                               <br/> <span>Resource</span>
                            </a>
                        </li>
                        <!-- Automation  -->
                        <li role="presentation">
                            <a href="#" aria-controls="automation" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                               <br/> <span>Automation</span>
                            </a>
                        </li>
                        <!-- Customize -->
                        <li role="presentation">
                            <a href="#" aria-controls="customize" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <br/><span>Customize</span>
                            </a>
                        </li>
                    </ul>
   </div>
  </body>
  </html>

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5227

Try this

CSS

.ilpFeatureSection .nav-tabs {
   border-bottom: none
   margin: auto;
 }

Upvotes: 0

julianstark999
julianstark999

Reputation: 3616

Use nav-justified and remove center-block from your nav.
nav-justified is a prewritten bootstrap class to center your nav. It simply does what @SankarRaj wanted too with .nav-tabs{width:100%}

Upvotes: 1

Lee Wise
Lee Wise

Reputation: 900

I believe this is because Bootstrap uses "float: left" on the nav-tabs items. You would need to set "float: none" and "display: inline-block" on the list items

Upvotes: 0

Related Questions