Utilize CSS to position the text content of a Bootstrap Tab Control (horizontal tabs) directly beneath the tab in order to prevent text from wrapping around the

I have designed a Bootstrap Tab Control with nested controls. The first tab has 3 horizontal tabs, while the second tab has 3 vertically aligned tabs. The third and fourth tabs contain plain text. However, I am facing an issue where the text content for the horizontally aligned tabs is displayed at the same level as the tabs, causing it to wrap around the tabs. I want the text content of these tabs to appear "Underneath" the respective tabs rather than wrapping around them. Can you suggest the CSS code that can achieve this?

<html>
<head>
  <title></title>
  <link rel="stylesheet prefetch" href="bootstrap.min.css" />
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="bootstrap.min.js"></script>

  <style type="text/css">

    .tab-content > .tab-pane,
    .pill-content > .pill-pane {
      display: none;
    }

    .tab-content > .active,
    .pill-content > .active {
      display: block;
    }                

     .tabs-left > .nav-tabs > li {
      float: none;
    }

    .tabbable > .nav-tabs > li > a {
      min-width: 74px;
      margin-right: 0;
      margin-bottom: 3px;
    }

    .tabbable > .nav-tabs {
      float: left;
      margin-right: 19px;
      border-right: 1px solid #ddd;
    }

    .tabbable > .nav-tabs > li > a {
      margin-right: -1px;
      -webkit-border-radius: 4px 0 0 4px;
         -moz-border-radius: 4px 0 0 4px;
              border-radius: 4px 0 0 4px;

    }

    .tabbable  > .nav-tabs .active > a,
    .tabbable  > .nav-tabs .active > a:hover,
    .tabbable  > .nav-tabs .active > a:focus {                                
      border-color: red blue red red;
      *border-right-color: lime;
      background-color: lime;
    }

    .tabbable > .nav > li > a:hover {
       background-color: red;
    }

    .tabbable > .nav > li > a {
       background-color: orange;
    }

    .tab-content {
        color: red;
        }




  </style>
</head>
<body>
<form>

    <div class="container">

        <div class="col-md-6">
          <h3>Tabs</h3>

            <div class="tabbable">
              <ul class="nav nav-tabs">
                <li class="active"><a href="#one" data-toggle="tab"><b>OneA abcdefg</b></a></li>
                <li><a href="#two" data-toggle="tab"><b>TwoA</b></a></li>
                <li><a href="#twee" data-toggle="tab"><b>ThreeA</b></a></li>
                  <li><a href="#fourth" data-toggle="tab"><b>fourthA</b></a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="one">


                            <div class="tabbable tabs-top">
                              <ul class="nav nav-tabs">
                                <li><a href="#oneb" data-toggle="tab"><b>OneB</b></a></li>
                                <li class="active"><a href="#twob" data-toggle="tab"><b>TwoB</b></a></li>
                                <li><a href="#tweeb" data-toggle="tab"><b>ThreeB</b></a></li>
                              </ul>
                              <div class="tab-content">
                                <div class="tab-pane" id="oneb">First Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
                                Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                                <div class="tab-pane active" id="twob">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                                Aliquam in felis sit amet augue.</div>
                                <div class="tab-pane" id="tweeb">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                                Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
                               </div>
                            </div>



                    </div>

                  <!-- ------------------- -->

                <div class="tab-pane" id="two">

                      <div class="col-md-7">        
                          <!-- tabs left -->
                          <div class="tabbable tabs-left">
                            <ul class="nav nav-tabs">
                              <li><a href="#a" data-toggle="tab"><b>One</b></a></li>
                              <li class="active"><a href="#b" data-toggle="tab"><b>Two</b></a></li>
                              <li><a href="#c" data-toggle="tab"><b>Twee</b></a></li>
                            </ul>
                            <div class="tab-content">
                             <div class="tab-pane" id="a">A) Lorem ipsum dolor sit amet, charetra varius </div>
                             <div class="tab-pane  active" id="b">B) Secondo sed ac orci quis tortor imperdiet</div>
                             <div class="tab-pane" id="c">C) Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. molestie tincidunt condimentum vitae. </div>
                            </div>
                          </div>

                      </div>

                </div>



                <div class="tab-pane" id="twee">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                Quisque mauris augue, molestie tincidunt condimentum vitae.</div>

                <div class="tab-pane" id="fourth">fourth amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
               </div>
            </div>
            <!-- /tabs -->
        </div>
     </div>
</form

htmlcsstwitter-bootstrap

Answer №1

To accomplish my goal, I successfully implemented a strategy involving the insertion of multiple
elements (around 5) before the content of every div within the corresponding tab (within inline
tags). However, I believe this method is somewhat outdated. Are there any CSS techniques available to achieve a similar outcome for each individual 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

Experiencing issues on Chrome while switching stylesheets; any tips on avoiding this glitch?

I am currently working on designing a webpage and running into some issues with Chrome when changing stylesheets for light and dark themes. Initially, I have included this <link>: <link rel="stylesheet" href="/css/dark.css" id="theme"> To sw ...

htmljquerycssgoogle-chrome

Is there a way to fully deactivate Next.js server-side rendering (SSR)?

I am on a quest to figure out how to turn off server-side rendering in NextJS and host it on a platform that doesn't support SSR. My online searches are currently focused on whether SSR can be completely disabled in NextJS using NextPages instead of N ...

htmlnext.jshostingserver-side-renderingstatic-site-generation

Creating a Drop-down Menu Item using React Material UI

I am experiencing an issue with displaying a MenuItem in my Dialog2 within my React app. Despite setting the zIndex: 1900 to a higher value than the two dialogs, the MenuItem remains hidden behind the dialogs instead of appearing at the front. Please revi ...

cssreactjsmaterial-uijss

When the menu is unfurled, the image descends gracefully

.nav-btn { display: block; background-color: #000; color: #FFF; font-size: 1.5em; /*text-align: right;*/ /*right: 2%;*/ float: right; cursor: pointer; padding-top: 20px; /*posi ...

htmlcssimage

How come the values (quantity, cost, total) are being stored as zero upon submission, despite successfully transferring the values from the dropdown list to the input using JavaScript?

1. Explanation I am transferring the quantity and price of a product from a dropdown list to input fields. Then I calculate the sum of quantity * price in the third input field. If the quantity or price changes, the sum is automatically updated and disp ...

javascripthtmlasp.net-corerazor

Controlling various divs with unique identifiers using Angular

Imagine having a vast number of HTML elements with unique IDs that require their styles to be changed repeatedly in a controller for spectrum visualization. What is the most efficient way to achieve this in Angular, without resorting to duplicative HTML co ...

javascripthtmlcssangularjs

Achieving full page height with div, iframe, and footer components

Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...

csshtmliframe

Styling of individual rows on hover in HTML

Here is the table I am working with: <tr> <th><p>ID</p></th> <th><p>NAME</p></th> <th><p>CLASS</p></th> <th><p>EDIT</p>&l ...

htmlcss

Navigating a series of identical patterns in Django?

Users are required to submit a list of field values via a form. class FieldForm(forms.Form): field_name = forms.CharField() field_value = forms.CharField() The challenge is how can users submit multiple entries with one form submission? Also, o ...

pythonhtmldjangohttpforms

Django will not be replacing the outdated image

My Django App is designed to display images on the browser based on user selections in the UI. Whenever there is a change in the UI, a JavaScript function is triggered that makes a call to a Django view. Each time I modify the UI in the browser, a new ima ...

javascriptpythondjangohtmldjango-templates

Adjust the styling of selected elements when their values are changed

I am attempting to modify the background color based on the selected value that is returned. However, my current code doesn't seem to be working as expected: <script> $(document).ready(function() { $('#assessments').change(functi ...

javascriptjqueryhtml

Could anyone provide clarification on this for me? (HTML CSS)

I currently have two divs that are positioned close together with no vertical space between them. However, I am facing an issue where changing the font in my <h1> yoga 2 pro</h1> element is causing a gap to appear between the two divs. To fix ...

htmlcss

What issues are present in this PHP code?

Can you identify the issue in this PHP code? I am using Netbeans 8.1 and whenever I type $ _GET, an error occurs <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...

phphtml

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

javascriptphphtmlaide

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

KnockoutJS's data binding feature is failing to display any content within the table rows

My JavaScript function creates a model and applies it to an HTML document using knockoutJS. In the HTML file, I have two different ways of displaying the same data: 1- A select list (which is working fine) 2- A table (not showing the same data) I need a ...

javascripthtmlknockout.jskendo-mvvm

Utilize XML and Javascript to create a captivating donut chart

I am currently experimenting with XML and JavaScript to generate a donut chart. I attempted to implement this JS code. However, I am struggling to create XML that is compatible with the JS. var SCIENCE = 0; var ART = 0; var MATH = 0; $(document).ready ...

javascripthtmlcssxml

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap

Styling with CSS: How to Adjust Word Wrap in a Container that Resizes Dynam

I'm struggling to ensure that long lines of text break and wrap correctly within a chat feature I am developing. The crucial elements in question are .chat__messages__item and .chat__messages__body (these are all contained within a parent element set ...

css

Concealing dropdown choices in a form with CSS only

My CSS skills are pretty limited, and despite my efforts to find a solution to my problem, I've come up short. I'm trying to tweak a CSS stylesheet to customize an advanced search form tied to a database. Unfortunately, I can't make any chan ...

cssforms