The alignment of Bootstrap's Tabs is not centered as expected

I'm having trouble aligning the tab list to the center. The image below shows that it's currently shifted to the left. I've already included the Bootstrap class center-block, but it doesn't seem to be working. Can anyone help me out with this? https://i.sstatic.net/b7mRM.png

Below is the HTML code snippet:-

<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 for reference:-

.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
    }
}

Any assistance would be greatly appreciated. Thank you :)

htmlcsstwitter-bootstrap

Answer №1

To center your nav, utilize the nav-justified class and eliminate center-block. The nav-justified is a bootstrap class designed for this purpose. It achieves the same effect as @SankarRaj's request with .nav-tabs{width:100%}

Answer №2

In my opinion, the reason for this behavior is due to Bootstrap's utilization of "float: left" on the nav-tabs elements. To resolve this issue, it is necessary to adjust the styling by setting "float: none" and "display: inline-block" on the list items.

Answer №3

Give this a shot

Cascading Style Sheets

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

Answer №4

Make the navigation tabs justified within a container and view 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delaying Jquery on scroll Event

Hey there, I've got a set of icons that I'd like to reveal one by one as you scroll down. I've incorporated some animations from , but now I'm wondering how I can implement a delay function in my jQuery so the icons appear sequentially ...

javascriptjqueryhtmlcss

centering pictures vertically on my webpage

Below is the code I am currently working with. It displays an image on the left and a description with a button on the right, side-by-side within the "promo_box_wrapper" container. However, I'm struggling to vertically align the image within its surro ...

htmlcss

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements w ...

htmlcssflexbox

Create a new NVD3 graph with a vertical line added

I am working with a NVD3 graph that displays a simple data set. My goal is to draw a line over the graph in a different color (similar to a cut-off value, which will be at x=5) <meta http-equiv="content-type" content="text/html; charset=UTF8"> <s ...

htmlangularjsnvd3.js

How do I create a sliding dropdown notification bar?

Can anyone provide some guidance on how to create a sliding dropdown section for my homepage, similar to the one on this website: . (Please note, be cautious of potential malware) I'm interested in replicating the dropdown section that says "call for ...

javascriptjqueryhtmlcss

Toggling the status of a Blank Checkbox

Working with a set of checkboxes, one is labeled conditions[]. The final checkbox in this group is titled "none". When this checkbox is selected, it should automatically check all the other checkboxes in the array. I am currently trying to determine the b ...

jqueryhtml

How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks! .template-banner{ width: 100%; height: auto; margin: 0; } ...

htmlcss

Adjusting the border size of an SVG without using the viewbox

Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the paren ...

htmlcss

Struggling to make `align-items="baseline"` function properly

I'm encountering an issue with alignment in my sandbox project. Specifically, I want the bottom of texts with different font sizes to be on the same y axis but I can't seem to figure out how to make it happen. Check out this picture to see exact ...

htmlcssreactjsflexboxreact-typescript

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

css

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

cssvariablestwitter-bootstrap

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

Adjust the FlipClock time based on the attribute value

When setting up multiple FlipClock objects on a page, I need to retrieve an attribute from the HTML element. The specific HTML tag for the clock is: <span class="expire-clock" data-expire="2015-09-22"> Is there a way to access '2015-09-22&apos ...

javascriptjqueryhtmlflipclock

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

The process of adding a tooltip icon to a Select component in Material-UI

I'm currently working with the material UI tooltip component and I want to position my tooltip to the right of a dropdown, right next to the down arrow as shown in the image below: https://i.stack.imgur.com/O2gwh.png However, the way it is set up no ...

htmlcssreactjsmaterial-ui

Menu items on the responsive design are vanishing

I am facing an issue with my sample menu layout. It appears fine on desktop view, but when I switch to a smaller window size of 480px, the items from About to Contact disappear when I hover away from the last item in the .has-children class. It seems like ...

htmlcss

Phonegap Application: Page design gets distorted following keyboard input

After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...

androidcssangularjscordovaphonegap-build

Showing Variables in JavaScript

<!DOCTYPE HTML> <html> <body> <button onclick="question++">Increment</button> <script> function test() { var question = 0; } </script> </body> </html> Qu ...

javascripthtmlwebincrement

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

javascriptcsspaypaldom-events

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript