Issues with Tab Pane Widths in Bootstrap 4

My project features tabbed content with three tabs, but I'm encountering an issue where each tab pane loses width. The first tab pane is 1140px (the full width of the container), but subsequently, each pane loses 100-200px consecutively.

For example:

  • The first pane is 1140px (full width of the container)
  • The second pane is: 1004px width
  • The third pane is: 794px width

I've checked for missing divs and confirmed that the structure of rows and columns within the tab panes isn't causing the problem. I also attempted to set width: 100% to the tab panes without success.

I am puzzled as to why this issue is occurring. 

<section class="home-office-types">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="nav nav-tabs home-office-types__tabs" id="myTab" role="tablist">
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link active" id="managed-offices-tab" data-toggle="tab" href="#managed-offices" role="tab"
              aria-controls="managed-offices" aria-selected="true">Serviced & managed offices</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="meeting-rooms-tab" data-toggle="tab" href="#meeting-rooms" role="tab"
              aria-controls="meeting-rooms" aria-selected="true">Meeting Rooms</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="virtual-offices-tab" data-toggle="tab" href="#virtual-offices" role="tab"
              aria-controls="virtual-offices" aria-selected="true">Virtual Offices</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="tab-content home-office-types__content" id="myTabContent">
        <div class="tab-pane fade show active" id="managed-offices" role="tabpanel"
          aria-labelledby="managed-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
                <li>No hidden costs - your monthly fee covers everything from all your utilities to cleaning</li>
                <li>Great value and truly affordable prices</li>
                <li>No long contracts - choose from a few days to as long as you want giving you total control of your business’ finances</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="meeting-rooms" role="tabpanel" aria-labelledby="meeting-rooms-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="virtual-offices" role="tabpanel" aria-labelledby="virtual-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://plaecehold.co/304x304" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

To view the JS Fiddle, click on the link below:

https://jsfiddle.net/graeme95/qo6tj819/2/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

.container {
  max-width: 100%; 
}

It seems like your grid design overlooks smaller devices. Remember to prioritize mobile responsiveness!

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

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel

The styles of Bootstrap 4 are not being used

My Bootstrap 4 css file isn't working properly and I need space for my navigation bar. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap ...

cssbootstrap-4

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...

javascriptjqueryhtmlcssforms

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

https://i.sstatic.net/muMSG.png One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - ...

javascriptjquerycssipad

How to center an HTML header

Currently working on a one-page scrollable website, aiming to have the first page consist of a navbar, image, and header. The challenge I'm facing is centered around aligning the header vertically. Although I managed to center it horizontally, the ver ...

htmlcssbootstrap-4

Using HTML5 input type number along with a regular expression pattern

In order to display only numbers and forward slashes in the input field with regex pattern, I attempted the following code: <input type="number" pattern="[0-9\/]*"> However, this code only shows the number pad from 0 to 9. How can I modify the ...

javascriptregexhtmlpattern-matching

Spacing between division elements and a footer that is positioned with float property

I have searched extensively, but none of the solutions I've found address my specific issue. There is a persistent 14px gap between vertical DIV elements on my page. Even when inspecting the code, there seems to be no margin or padding causing this g ...

htmlcss

Having trouble retrieving JSON data from backend server in Svelte framework

My goal is to retrieve JSON data from the Backend, specifically information about music videos. It should be a simple task, but I am encountering some difficulties. I attempted to follow a tutorial provided at: . The tutorial demonstrated fetching data wi ...

javascripthtmljsonfrontendsvelte

Locate a Sub-Child href Element using Selenium

I am attempting to interact with a link using Selenium automation tool. <div id="RECORD_2" class="search-results-item"> <a hasautosubmit="true" oncontextmenu="javascript:return IsAllowedRightClick(this);" class="smallV110" href="#;cacheurl ...

pythonhtmlseleniumweb-scraping

Combining onClick and a href within a single sentence: How can I effectively utilize both onClick

Currently, I have implemented the following code for a sliding menu bar. However, I am facing an issue where upon clicking on a href link, I want the ".gs-hamburger" function to slide up the menu bar after redirecting to the page. <nav class="gs-nav- ...

jqueryhtml

Initial value preselected for radio button

Is there a way to ensure that the Default radio button selected in the following code is always "Period"? Currently, when the page loads, none of the radio buttons are selected. <tr> <th valign="top" align="left"> Scope ...

javascripthtmljsp

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

What changes can I expect if I switch from inline to block display for a table?

Why are border-spacing and border-collapse still working even when I set the display property of the table element to block? I thought these properties only worked when the display was set to table, but it's still functioning. Why is that? I didn&apo ...

htmlcss

What can I do to prevent a scrolling div that exceeds the height of the div itself?

I'm trying to align an image to the right side with a fixed position and have a large text content on the left side. I want the text content to be scrollable using bootstrap. Here is my code snippet. Thank you for your time and any suggestions! &l ...

jquerycssbootstrap-4stickyscrollspy

Issue: The error message "undefined variable 'angular'" appears when attempting to access offline files stored on a network drive

I have successfully developed offline forms using angular js v1.6.4, angular-ui-bootstrap, and angular-ui-router without the need for server hosting. When the package is saved on local storage, it functions perfectly on both IE and Chrome browsers. Howeve ...

javascriptangularjstwitter-bootstrapangular1.6

The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> < ...

htmlcssfonts

Implement Java code to transform HTML into XML format

<TBODY> <TR> <TD colSpan=4>Details of your Travel</TD></TR> <TR></TR> <TR> <TD colSpan=4>Booking Reference : XXX</TD></TR> <TR></TR> <TR> <TD>Passenger& ...

javahtmlxmlnsxmlparser

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

I've been working on developing a chrome extension that autofills input forms in web pages. However, I encountered an error that says "cannot read properties of null." This issue arises when I try to add an event listener to a button in my code. The f ...

javascripthtmldomgoogle-chrome-extensionaddeventlistener