Mastering the alignment of tab content on Bootstrap 5 to ensure it always displays on the right side

With Bootstrap 5, I've managed to implement tab content that remains visible regardless of the active tab:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d100d130e424f534b4212">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e1508150b165a574b535a0a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

This setup results in the "Testing" section being displayed in both tabs as intended:

https://i.sstatic.net/ePqcf.png

I'm looking to place this "Testing" text to the right of both tabs. Specifically, I want it inside the white area and aligned with the words "ENTER" like shown here:

https://i.sstatic.net/jHJMH.png

Update

Thank you Kameron for your helpful solution below. If I wanted to include some SVG images in this section, such as Facebook or Twitter icons, would that be feasible?

https://i.sstatic.net/5Uk3N.png

csstwitter-bootstrapbootstrap-5

Answer №1

If you want to place the text "Testing" next to the tab-content, you need to apply the .d-flex class to the parent .tab-pane. Although you already had the .flex-nowrap class, it won't work properly without the presence of .d-flex or another equivalent flex class.

Furthermore, you can easily utilize Bootstrap's .flex-grow-1 class on the first and second child elements within .tab-content.

Make use of the .flex-grow-* utilities to control how a flex item expands to occupy available space.

You can then adjust your widths accordingly. As long as you include d-flex on the parent along with .flex-nowrap, you'll always achieve the desired outcome of having the "Testing" div positioned beside each .tab-pane.

/* Solely for SVG demo purposes */

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

svg[aria-label="Twitter"] {
  background: #55acee;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130e130d105c514d555c0c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e4f9e7fab6bba7bfb6e6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Answer №2

If you want to have tab content constantly visible regardless of the active tab in Bootstrap 5, simply apply the classes "show active" to the first tab's content element. This will ensure that the content remains visible by default and won't disappear when switching tabs.

Answer №3

To achieve the desired outcome, I made two modifications to your existing structure:

  1. Add the d-flex class to the .tab-content element.
  2. Include the following CSS rule: .tab-pane { flex-grow: 1; }

Please refer to the snippet below for the updated result:

.tab-pane {
  flex-grow: 1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa7baa4b9f5f8e4fcf5a5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0edf0eef3bfb2aeb6bfef">[email protected]</a>/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>

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

difference in flex-shrink behavior between Firefox and Chrome

Why does this code sample render differently on Firefox than on Chrome? Is this a browser bug, and if so, which browser is rendering per spec? If there is a bug report available, I would appreciate a link to it. Currently, adding flex-shrink: 0 to the na ...

htmlcssflexboxbootstrap-4

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

javascriptjqueryhtmlcss

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display. My approach started with using the collapse class from Bootstrap 4.1.2. While i ...

htmlcssbootstrap-4

Move your cursor over X or Y to alter the color of Y exclusively

I am currently designing a navigation bar that includes icons followed by the title of their respective pages (for example, an icon of a home followed by the text 'Home'). I would like to change the color of only(!) the icon from black (default) ...

htmlcsshover

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

javascripthtmlcss

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

javascripthtmlcss

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

htmlcss

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

jqueryhtmlcssasp.net-mvc-4

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

javascriptjqueryhtmlcsstwitter-bootstrap

React and SASS - issue with checkbox component not being properly aligned with its label

I'm brand new to React and I'm currently in the process of converting a pure HTML page into a React component. How can I adjust the SASS stylesheet to match the original HTML layout? Here is my current React setup (the checkbox displays on the r ...

javascripthtmlcssreactjssass

What is the process for utilizing bootstrap to automatically adjust font size on larger screens?

I'm facing an issue with displaying bullet points on varying screen sizes while using bootstrap. The fonts resize perfectly on my laptop, but when displayed on a large TV screen or tested with the responsive tool in the browser, the font size remains ...

bootstrap-5

Use jQuery to place the initial 3 elements within a div

Currently, I am dynamically pulling content into li elements using ASP.NET. My goal is to wrap a specific div class around the first 3 li items in the list only. Here is an example: <ul class="wrapper"> <div cl ...

jqueryhtmlasp.netcss

Step-by-step guide to layering two divs within a table cell

Here is the code I am working with: <td class="mobile-user-icon"> <span class="mobile-photo">background text</span> <span class="mobile-caller-mute">overlay text</span> </td> .mobile-user-icon { width: 64px ...

htmlcss

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

htmlcsslayoutcss-float

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

Using the mousewheel to scroll over an iframe is not functioning properly in Internet Explorer versions 8 through 11

I have implemented Perfect-Scrollbar, a jQuery script, which works well in Firefox, Safari, Chrome, and Opera. However, I am facing an issue with scrolling using the mouse wheel when it is used in combination with an iframe in Internet Explorer versions 8 ...

jqueryhtmlcssiframe

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

javascripthtmlcss

Difficulty in pinpointing hyperlinks within a styled list

My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows: <div id="sidebar_tall"> <ul> <li class="active_item"> ...

htmlcss

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss