Question 61274 in Twitter Bootstrap Question posted in

Bootstrap 5 – How to display tab content to always display to the right-Twitter bootstrap

Using Bootstrap 5, I am able to display tab content that always displays (no matter which tab the user is in):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<!-- Tabs navs -->
<ul class="nav nav-tabs" id="tabNavs01">
  <li class="nav-item"><a id="t-customer" data-bs-toggle="tab" class="nav-link active" href="#tabcustomer">customer</a></li>
  <li class="nav-item"><a id="t-position" data-bs-toggle="tab" class="nav-link" href="#tabposition">position</a></li>
</ul>
<!-- Tabs content -->
<div class="tab-content col-md-7 flex-nowrap" id="tabCont01">
  <div class="tab-pane fade show active" id="tabcustomer">
    <div class="input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type="text" value="" name="" id="txtcustomer" placeholder="customer" class="form-control add-main" onclick="validatecustomer();">
      <input type="text" value="" name="" id="txtcomputer" placeholder="computer" class="form-control add-computer" onclick="validatecustomer();">
    </div>
  </div>
  <div class="tab-pane fade" id="tabposition">
    <div class="input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type="text" value="" name="" id="txtposition" placeholder="position" class="form-control position-box" onclick="searchByposition();">
    </div>
  </div>
  <div>
    <label><strong>Testing</strong></label>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

This produces the area “Testing” that appears in both tabs as desired:

enter image description here

My question is how can I get this “Testing” text to appear to the right of both tabs? I am trying to get it to this location inside the “white” area and aligned with the words “ENTER” as seen here:

enter image description here

Update

Thank you Kameron, your solution below worked nice. If I wanted to add some svg in this area, would that be possible such as this Facebook/Twitter images:

enter image description here

Tags:

3

Answers


  1. 0

    To display tab content that always shows regardless of which tab the user is currently in using Bootstrap 5, you can add the "show active" classes to the content element of the first tab. This will ensure that the content is visible by default and will not be hidden when switching between tabs.

    Login or Signup to reply.
  2. 0

    I added two changes to achieve that based on your structure

    1. add d-flex class to .tab-content
    2. add following css .tab-pane { flex-grow: 1; }

    Have a look on the snippet result.

    .tab-pane {
  flex-grow: 1;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="tabNavs01">
  <li class="nav-item"><a id="t-customer" data-bs-toggle="tab" class="nav-link active" href="#tabcustomer">customer</a></li>
  <li class="nav-item"><a id="t-position" data-bs-toggle="tab" class="nav-link" href="#tabposition">position</a></li>
</ul>
<!-- Tabs content -->
<div class="tab-content col-md-7 d-flex flex-nowrap" id="tabCont01">
  <div class="tab-pane fade show active" id="tabcustomer">
    <div class="input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type="text" value="" name="" id="txtcustomer" placeholder="customer" class="form-control add-main" onclick="validatecustomer();">
      <input type="text" value="" name="" id="txtcomputer" placeholder="computer" class="form-control add-computer" onclick="validatecustomer();">
    </div>
  </div>
  <div class="tab-pane fade" id="tabposition">
    <div class="input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type="text" value="" name="" id="txtposition" placeholder="position" class="form-control position-box" onclick="searchByposition();">
    </div>
  </div>
  <div>
    <label><strong>Testing</strong></label>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    To get "Testing" next to the tab-content you have to use .d-flex on the .tab-pane parent. You already had .flex-nowrap, but it is invalid without having .d-flex or another flex class.

    Next, you can just use Bootstraps .flex-grow-1 class on the first and second child to .tab-content.

    Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

    You can then configure out your widths etc, but as long as you have d-flex on the parent with .flex-nowrap you will always have your desired "Testing" div next to each .tab-pane.

    /* for SVG demo only */

svg[aria-label="Facebook"] {
  background: #3b5998;
}

svg[aria-label="Twitter"] {
  background: #55acee;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<!-- Tabs navs -->
<ul class="nav nav-tabs align-items-center" id="tabNavs01">
  <li class="nav-item"><a id="t-customer" data-bs-toggle="tab" class="nav-link active" href="#tabcustomer">customer</a></li>
  <li class="nav-item"><a id="t-position" data-bs-toggle="tab" class="nav-link" href="#tabposition">position</a></li>
  <li class="svgs ms-auto me-2">
    <svg role="img" aria-label="Facebook" width="30" height="30">
      <title>Facebook</title>
    </svg>
    <svg role="img" aria-label="Twitter" width="30" height="30">
      <title>Twitter</title>
    </svg>
  </li>
</ul>
<!-- Tabs content -->
<div class="tab-content d-flex col-md-7 flex-nowrap align-items-center" id="tabCont01">
  <div class="tab-pane fade show active flex-grow-1" id="tabcustomer">
    <div class="input-group flex-nowrap">
      <h2 class="me-2">ENTER:</h2>
      <input type="text" value="" name="" id="txtcustomer" placeholder="customer" class="form-control add-main" onclick="validatecustomer();">
      <input type="text" value="" name="" id="txtcomputer" placeholder="computer" class="form-control add-computer" onclick="validatecustomer();">
    </div>
  </div>
  <div class="tab-pane fade flex-grow-1" id="tabposition">
    <div class="input-group flex-nowrap">
      <h2 class="me-2">ENTER:</h2>
      <input type="text" value="" name="" id="txtposition" placeholder="position" class="form-control position-box" onclick="searchByposition();">
    </div>
  </div>
  <div class="ms-2">
    <label><strong>Testing</strong></label>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search