Utilize Bootstrap to combine two tables within a single column efficiently

I am facing an issue with my layout that involves organizing 3 tables in a specific way. Two smaller tables are supposed to take up 3 bootstrap columns on the left side, while one larger table should occupy 9 columns on the right side. However, when I implemented the code, both smaller tables ended up appearing on the same row, while the bigger one displayed below them.

body {
    padding: 3%;
}
<!DOCTYPE html>

<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="left-side-top" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div id="left-side-bottom" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

To fix this layout issue and achieve the desired display as shown in the image, adjustments need to be made using Bootstrap 4.5.

htmlcssbootstrap-4

Answer №1

Instead of relocating the second small table to a separate col-3 div element, simply position it below the first small table within the initial col-3 div element. Take a look at the revised code snippet below:

body {
  padding: 3%;
}
<!DOCTYPE html>

<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="left-side-top" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
      
      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

Hope this adjustment helps in achieving the desired layout.

Answer №2

<!DOCTYPE html>

<html>
<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="left-side-top" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="left-side-bottom">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      </div>



      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body></html>

The position of your div has been adjusted. Hope this modification is helpful...

Answer №3

Ensure that your layout follows this structure:

<div class="container">
 <div class="row">
  <div class="col-md-3">
   <!--Add your two small tables here-->
  </div>
  <div class="col-md-9">
   <!--Include the large table here-->
  </div>
 </div>
</div>

Answer №4

<!DOCTYPE html>
<html>

<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">
     
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
     
      </div>
      
    
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
     
      </div>
      
      <div class="col-sm-8" style="background-color:lavenderblush;">
      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>
</html>

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

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

Steps for incorporating an icon into a datagrid in ReactJS

I'm looking to enhance my datagrid by incorporating icons in a specific column, particularly the 'Role' column. However, I'm unsure of the feasibility and implementation process within a datagrid. Despite scouring the web for solutions, ...

htmlreactjsmaterial-ui

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

What is the best way to include a background image in a div within a React component?

I'm currently following a tutorial on creating an RPG game using React. The tutorial can be found at this link. I am trying to replicate the presenter's code by typing it out myself. However, I'm running into an issue when attempting to add ...

javascriptcssreactjs

How can I display Bootstrap 4v6 Modal automatically when the page loads?

I have been attempting to create a subscription pop up modal box using the latest Bootstrap 4 framework. My goal is to have the subscription box appear automatically when the page loads, without requiring clients to click a button. Despite following variou ...

jquerybootstrap-modalbootstrap-4twitter-bootstrap-4

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

htmlcss

Field cannot be submitted without the required input after an Ajax request

I want to ensure that all my text/email input forms require a submission before you can "Submit" the email. Unfortunately, when using Ajax to prevent the page from refreshing after pressing the button, the required attribute does not function properly. T ...

javascriptjqueryhtmlajax

Jumping occurs in Slick Carousel when adjusting the width of the active slide

Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/ I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment. The foll ...

jqueryhtmlcssanimationslick.js

Utilize Bootstrap 4 to seamlessly integrate a small element between two lengthy items in a row, ensuring a gap

I would like to achieve a similar look to this design. https://i.sstatic.net/p1hq4.png hr { border: none; color: black; background-color: black; height: 5px; margin-top: 10px; } <div class="row code-line"> <div class="col-5 ...

htmlcssfrontendtwitter-bootstrap-4

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

I am looking to display a large amount of data using the Accordion component from material-ui nested inside a Box element. However, I am unsure how to customize the default styles in order to set a specific maxHeight. Is there a way for me to take control ...

cssreactjsmaterial-ui

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

cssrubyjekyllliquidgithub-pages

Animating two elements on scroll at specific point with speed problem

Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...

jquerycssanimation

Unexpectedly, the digit '1' has mysteriously appeared on my website without any explanation

I have noticed that the number "1" is appearing on my website without me having implemented it myself. Currently, I am using a template.php file to manage page creation. I simply import the content code into a $the_content variable and then print it. To ...

phphtml

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss

Tips for retrieving HTML file content as a string using JavaScript

I'm looking to retrieve the contents of an HTML file using JavaScript and store it as a string. I tried writing some code for this purpose, but unfortunately, I encountered an error: Error: Cannot find module 'xmlhttprequest' Could someone ...

javascripthtmlnode.js

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...

cssfont-faceunderline

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's

Currently, I am utilizing react, Bootstrap, and some custom sass to construct and style the front end of my web application. While the design appears good on mobile devices, there is an issue where users need to pinch the screen due to it looking slightly ...

cssmobilebootstrap-4sassmedia-queries