Expanding the content width of Bootstrap Nav Pills

I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width for both tabs. Specifically, I want the container for tab1 to be 600px wide and tab2 to be 800px wide.

<div class="container"> 
<ul  class="nav nav-pills justify-content-center">
            <li class="active">
        <a  href="#tab1" data-toggle="tab">First Tab</a>
            </li>
            <li><a href="#tab2" data-toggle="tab">Second Tab</a>
            </li>
            
        </ul>

            <div class="tab-content clearfix">
              <div class="tab-pane active" id="tab1" >
          <h3>Similar to example 1, but with customized tab corners</h3>
                </div>
                <div class="tab-pane" id="tab2">
          <h3>Using the nav-pills class instead of nav-tabs for automatic tab background color</h3>
                </div>
        
            </div>
  </div>

Css:

.nav-pills > li {
    float:none;
    display:inline-block;
    zoom:1;
}

.nav-pills {
    text-align:center;
}

.nav-pills > li > a {
  border-radius: 6px 6px 0 0 ;
  
  background-color: #FFF;
  color: black;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 7px 50px;
    text-decoration: none;
    margin-right: 20px;
}
.nav-pills > li.active > a {
  background-color: #F5A000;
}


.tab-content {
    margin-top: 4px;
  padding : 5px 15px;
  box-shadow: 0 2rem 2rem #00000080;
  height:90px;
  position: relative;
  border-radius:0px 0px 8px 8px;
  border-top: 3px solid #F5A000;
  background-color: rgba(255, 255, 255, 0.5);
  
}

Does anyone have any suggestions on how to achieve this customization?

Answer №1

"I want tab1 container to be 600px wide, and tab2 to be 800px."

Both tabs are contained within a shared tab-content container. However, since each tab has its own tab-pane, you have the flexibility to adjust the width individually.

.tab-pane {
    padding: 5px 15px;
    box-shadow: 0 2rem 2rem #00000080;
    position: relative;
    border-radius: 0px 0px 8px 8px;
    border-top: 3px solid #F5A000;
    background-color: rgba(255, 255, 255, 0.5);
}

#tab1 {
    width: 600px;    
}

#tab2 {
    width: 800px;    
}

EDIT: For centering, you can utilize flexbox on the tab-content:

<div class="tab-content clearfix d-flex justify-content-center">..</div>

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

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

Tips for achieving content-width while employing the 'grid' display property?

Here is a specific container I am working with: #containerDiv { display: 'grid' grid-template-columns: 'repeat(6, auto)' } The issue I am facing is that the children within the container are taking up more space than their actual w ...

Positioning an image at the bottom left of the page using absolute positioning is simply not effective

Can anyone help me figure out how to make an image stay just above the footer on the bottom left-hand side of the main content? I've tried using floats, margins, and positioning on left nav elements without success. Here's a link to see what I me ...

Tips for ensuring that CSS hover effects stay in place even when the page is scrolled

i'm having trouble with a project in React JS that I received from another team. I'm not very confident in my skills with React JS, and I'm facing an issue where a certain part of the page is supposed to change to red when hovered over. Howe ...

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

Utilizing LessCss for color transparency and variable declarations with @vars

I'm attempting to create a function using LessCss, but I am encountering an issue: .transparent-border (@alpha:.15, @color:'0,0,0', @type: solid, @size:1px) { @val: @size @type rgba(@color, @alpha); border: @val; } The problem er ...

Having trouble getting the hover effect to change the colors of CSS borders

I am experiencing difficulty in changing the background color of the 'About' button to yellow and the border color to blue when it is hovered over. Currently, only a small rectangle around the text changes to yellow on hover and I cannot figure o ...

Stop Scrolling on Web Pages with HTML5

I need assistance in preventing all forms of page scrolling within my HTML5 application. Despite searching on popular platforms like SO and Google, I have been unable to find a comprehensive solution for disabling all scrolling mechanisms entirely. Existin ...

style for a bootstrap form input

Can the form-control from Bootstrap be made inline for input without relying on the grid system like col-md-2? This is the one aspect of Bootstrap that I find particularly frustrating. ...

Three columns with the first column having a flexible width

On various coding forums, I've come across multiple examples using floats, but none have provided a solution for my specific issue. I have three column divs with varying widths - the first column is dynamic while the other two are fixed. Looking for a ...

Emphasize Expandable Sections based on Search Term

I have been working on developing an HTML page for my company that will showcase a list of contacts in an "experts list". Currently, the list is structured using collapsible DIVs nested within each other. Additionally, the HTML page features a search func ...

Using AngularJS to retrieve DOM elements within a directive's controller

Currently, I am in the process of creating a custom image carousel directive using only AngularJS and no additional libraries. simpleCarousel.$inject = []; function simpleCarousel() { var directive = { restrict: 'E', templat ...

How to implement a pop-up dialog box with multiple input boxes using AngularJS?

If you click on the link below: https://material.angularjs.org/latest/demo/dialog You'll notice that the prompt dialog box features only one input field. I'm curious to know if it's possible to customize this using mdDialog to include mult ...

Ways to prevent a specific class from using CSS styling

My HTML <body> <div id="finalparent"> <!--many parent divs here--> <div id="1stparent"> <div id="txt_blog_editor" class="box" style="width: 1097px;"> <div class="abc anotherclass"> </div> & ...

IE9 Z-index Issue

Currently, I am facing an issue with two images not displaying correctly on a website that I am working on. The problem seems to be specific to IE 9, as other browsers are working fine. The trouble arises when I try to create a slideshow with a shadow back ...

Primeng - Concealed dropdown values within a scrollable table header

Recently, I integrated Primeng p-table with a filter and frozen column feature (with one column being fixed while the others are movable). However, I encountered an issue with the select dropdown in the header. When I try to open the dropdown, the values a ...

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...