Double-up with Bootstrap's dual-column tabs

Looking to customize the layout of a nav-tabs ul to display its contents in 2 columns instead of horizontally, as per the default Bootstrap style for nav-tabs.

Attempted to use the CSS property column-count: 2 but it didn't yield the desired result.

Shown below is the code snippet:

<ul class="nav nav-tabs ml-0 mr-0 bg-primary two-columns" role="tablist" style="column-count: 2;">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#cont1"  role="tab">Title 1</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont2"  role="tab">Title 2</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont3"  role="tab">Title 3</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont4"  role="tab">Title 4</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont5"  role="tab">Title 5</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont6"  role="tab">Title 6</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont7"  role="tab">Title 7</a></li>
    <li class="nav-item"><a class="nav-link       " data-toggle="tab" href="#cont8"  role="tab">Title 8</a></li>
</ul>


<!-- Tab panes -->
<div class="tab-content ml-2 mr-2">
    <div class="tab-pane jumbotron active" id="cont1" role="tabpanel">Content 1</div>
    <div class="tab-pane jumbotron active" id="cont2" role="tabpanel">Content 2</div>
    <div class="tab-pane jumbotron active" id="cont3" role="tabpanel">Content 3</div>
    <div class="tab-pane jumbotron active" id="cont4" role="tabpanel">Content 4</div>
    <div class="tab-pane jumbotron active" id="cont5" role="tabpanel">Content 5</div>
    <div class="tab-pane jumbotron active" id="cont6" role="tabpanel">Content 6</div>
    <div class="tab-pane jumbotron active" id="cont7" role="tabpanel">Content 7</div>
    <div class="tab-pane jumbotron active" id="cont8" role="tabpanel">Content 8</div>
</div>

Additionally, I've defined a custom CSS class two-columns

ul.two-columns {
    -moz-column-count: 2 !important;
    -moz-column-gap: 2.5em !important;
    -webkit-column-count: 2 !important;
    -webkit-column-gap: 2.5em !important;
    column-count: 2 !important;
    column-gap: 2.5em !important;
}

It seems that the JavaScript included in Bootstrap could be interfering with my custom styles. Any suggestions on how to resolve this issue?

csstwitter-bootstrap

Answer №1

Here is an answer you can try:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style>
.tabs-left{
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-left>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
</style>

<div class="row" style="min-height:300px;">
    <div  class="col-sm-6">
        <div class="col-xs-3">
            <!-- required for floating -->
            <!-- Nav tabs -->
            <ul class="nav nav-tabs tabs-left">
               <li class="nav-item active"><a class="nav-link" data-toggle="tab" href="#cont1"  role="tab">Title 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont2"  role="tab">Title 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont3"  role="tab">Title 3</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont4"  role="tab">Title 4</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont5"  role="tab">Title 5</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont6"  role="tab">Title 6</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont7"  role="tab">Title 7</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cont8"  role="tab">Title 8</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <!-- Tab panes -->
           <div class="tab-content ml-2 mr-2">
    <div class="tab-pane jumbotron active" id="cont1" role="tabpanel">Content 1</div>
    <div class="tab-pane jumbotron" id="cont2" role="tabpanel">Content 2</div>
    <div class="tab-pane jumbotron" id="cont3" role="tabpanel">Content 3</div>
    <div class="tab-pane jumbotron" id="cont4" role="tabpanel">Content 4</div>
    <div class="tab-pane jumbotron" id="cont5" role="tabpanel">Content 5</div>
    <div class="tab-pane jumbotron" id="cont6" role="tabpanel">Content 6</div>
    <div class="tab-pane jumbotron" id="cont7" role="tabpanel">Content 7</div>
    <div class="tab-pane jumbotron" id="cont8" role="tabpanel">Content 8</div>
</div>
        </div>
        <div class="clearfix"></div>
    </div>

Answer №2

Feel free to test out this HTML code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li  class="active"><a data-toggle="pill" href="#home">Home</a></li>
        <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
      </ul>
    </div>
    <div class="col-md-9">
   <div class="tab-content">
    <div id="home"  class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
    </div>

  </div>
</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

Excessive white space on WordPress pages is creating a less than ideal

On my WordPress page, I have set up a row with the main side at span10 and the right sidebar at span2. However, the layout leaves too much blank space, causing users to scroll to the right and see nothing. You can view the specific page here Below is the ...

htmlwordpresstwitter-bootstrapbootstrap-4

Do colors appear differently on various screens?

I've noticed that the background color #1ABC9B appears differently on various monitors when viewing my website. On MAC systems and smart phones, it appears as a lighter shade of green compared to other laptops where it appears darker. What could be ca ...

csscolors

How can I arrange columns on mobile devices without affecting the layout on desktop screens?

For my first time using Bootstrap v. 4, I am working on a footer that consists of three rows on desktop. Each row contains two columns, one with an icon and the other with text. However, I want to adjust the layout for mobile devices so that the icon appe ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Element with absolute position does not expand along with scrollable content (over 100%)

In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...

javascriptjqueryhtmlcss

Ensuring the model accurately reflects the input's value attribute in AngularJS

I am in the process of creating a set of image "radio buttons" where only one can be selected per group. However, as a newcomer to Angular, I'm facing difficulties in maintaining the value and using it as my ng-model. Additionally, I am looking for a ...

javascripthtmlcssangularjs

Using animate.css and jQuery for sequential animations

Is there a way to make them fadeInUp one after the other? Check out the demo http://jsfiddle.net/uz2rm8jy/4/ Here is the HTML structure: <div class="c one"></div> <div class="c two"></div> <div class="c three"></div> ...

javascriptjquerycss

AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck. Here's the HTML snippet: <div class="navbar-collap ...

htmlcsswordpressfirefoxtwitter-bootstrap-3

Props and theme merge to create uniquely designed styled components with a thematic twist

Out of sheer curiosity, I've been incorporating styled-components into my React application. Within this framework, I make use of the recommended theme to ensure consistency in colors and sizes throughout. Currently, my approach looks something like ...

cssreactjssassstyled-componentsemotion

Make the background image draggable while maintaining its size with background-size:cover

I'm working on a fixed div with an image as the background, set up like this: <div style=' width:230px; height:230px; background-repeat: no-repeat; background-image:url(img/myimage.jpeg) background-size: cover;'&g ...

jqueryhtmlcss

Issue with Closing Bootstrap 4 Modal on Hide Operation

I had successfully implemented this feature in bootstrap 3, but unfortunately, I have not been able to replicate the same in bootstrap 4 (beta). The modal for the sign-in form is structured as follows: <div class="modal fade" id="signInModal" tabindex ...

jqueryhtmltwitter-bootstrapbootstrap-modalbootstrap-4

How can you utilize jQuery to eliminate specific select field values from the DOM prior to submission?

I am currently working on a Squarespace form that utilizes jQuery to show/hide specific fields in order to create a customized form using the show(); and hide(); functions. $(".option2 select").hide(); The issue I am facing is that simply hiding the fiel ...

jqueryhtmlcsssquarespace

Unifying flex and position:fixed

I'm having difficulties when it comes to displaying a modal dialog with a fixed position within a flex layout. The header and footer of the dialog need to be set in height, while the content section should have overflow with scrollbars. I chose the fl ...

htmlcssflexbox

Tips for expanding the dimensions of a text box within the filter menu

In my application, I am using a kendo grid with filterable set to true. The filtering functionality is working properly. However, when I click on the filter symbol, the filter menu opens and I noticed that the size of the text-box within the menu is too sm ...

csskendo-grid

What is the best way to create a close button using JavaScript?

I just started learning JavaScript and I want to figure out how to make the close button close the div .popup1 in the following code: https://jsfiddle.net/74hmx0vb/1 <div class='popup1' id="popup1"> <div class="containe ...

javascriptjqueryhtmlcss

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

Elements not being styled by CSS properties

I am facing an issue with a CSS file designed to theme a page in white on black, as opposed to the usual black on white. body { background-color: black; } h1 h2 h3 h4 h5 h6 p { color: white; } However, the color: white; property is not being applied ...

htmlcsstwitter-bootstrap

`Videos on youtube with elements overlapping each other`

Having an issue with YouTube videos where other elements (LayerSlider) are overlapping on top of them. You can see the problem by clicking on this link () and trying to make the video fullscreen. I found a similar issue mentioned in the following link: Y ...

htmlcssyoutube

Tips on implementing vertical-align within an inline-table

Can someone help me with vertically centering text inside links without losing the 100% height of "a" elements? I've tried to tackle this issue without success, and I am using Twitter Bootstrap 3. Any suggestions would be greatly appreciated. ...

htmlcss

Discover a new way to showcase user information by utilizing the popover feature of Bootstrap, all without the need for a

I am currently working on a project in razor page asp.net and I have encountered an issue. I am unable to display user details using a mouse hover or popover without relying on the bootstrap modal. Here is the code I am using: <button type="button ...

jquerycssasp.net-corebootstrap-4razor-pages

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

csssassnext.jscss-modulesreact-css-modules