Two tables are refusing to stack on top of each other

I have encountered an issue while trying to construct a website using bootstrap. The problem lies in the layout of two tables that appear stacked on top of each other instead of being positioned next to each other. Despite my attempts at various solutions, I have been unable to resolve this issue.

Below is the snippet of my current code;

<div class="container-fluid">
  <div class="col-md-5">
    <h5>ANIMALS</h5>
    <hr>
    <div class="card card-body">
      <a class="btn btn-primary  btn-sm btn-block" href="">Add New Animal</a>
      <table class="table table-sm">
        <tr>
          <th>Type</th>
          <th>Name</th>
          <th>Edit</th>
          <th>Delete</th>
          <th>Details</th>
        </tr>
        <td></td>
        <td></td>
        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
      </table>
    </div>
    <br>
  </div>

  <div class="col-md-5">
    <h5>VISITS</h5>
    <hr>
    <div class="card card-body">
      <a class="btn btn-primary  btn-sm btn-block" href="">Schedule New Visit</a>
      <table class="table table-sm">
        <tr>
          <th>Animal</th>
          <th>Drop Off</th>
          <th>Pick Up</th>
          <th>Edit</th>
          <th>Delete</th>
          <th>Confirmation</th>
        </tr>
        <td></td>
        <td></td>
        <td></td>
        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>

      </table>
    </div>
  </div>
</div>

Your help is much appreciated.

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

htmlcssbootstrap-4

Answer №1

To create a proper layout, remember to enclose the columns within a 

<div class="row">
element. Ensure you have a good understanding of the grid system. Here is an example of how it should be done:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <h5>ANIMALS</h5> 
            <hr>
            <div class="card card-body">
                <a class="btn btn-primary  btn-sm btn-block" href="">Add new animal</a>
                <table class="table table-sm">
                    <tr>
                        <th>Species</th>
                        <th>Name</th>
                        <th>Edit</th>
                        <th>Delete</th>
                        <th>Details</th>
                    </tr>
                        <td></td>
                        <td></td>
                        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
                        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
                </table>
            </div>
            <br>
        </div>

        <div class="col-md-5">
            <h5>VISITS</h5>
            <hr>
            <div class="card card-body">
                <a class="btn btn-primary  btn-sm btn-block" href="">Schedule a visit</a>
                <table class="table table-sm">
                    <tr>
                        <th>Animal</th>
                        <th>Drop-off</th>
                        <th>Pick-up</th>
                        <th>Edit</th>
                        <th>Delete</th>
                        <th>Confirmation</th>
                    </tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
                        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
                </table>
            </div>
        </div>
    </div>
</div>

Result:

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

Answer №2

Enclose two sections in a <div> with the class name row

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-5">
      <h5>ANIMALS</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Add new animal</a>
        <table class="table table-sm">
          <tr>
            <th>Species</th>
            <th>Name</th>
            <th>Edit</th>
            <th>Delete</th>
            <th>Details</th>
          </tr>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
        </table>
      </div>
      <br>
    </div>

    <div class="col-md-5">
      <h5>VISITS</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Schedule a visit</a>
        <table class="table table-sm">
          <tr>
            <th>Animal</th>
            <th>Arrival</th>
            <th>Departure</th>
            <th>Edit</th>
            <th>Delete</th>
            <th>Confirmation</th>
          </tr>
          <td></td>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>

        </table>
      </div>
    </div>
  </div>

Answer №3

If you are working with bootstrap, make sure to enclose your columns within a div that has the class "row" in order for them to be displayed on the same row.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-5">
      <h5>ANIMALS</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Add new animal</a>
        <table class="table table-sm">
          <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Edit</th>
            <th>Delete</th>
            <th>Details</th>
          </tr>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
        </table>
      </div>
      <br>
    </div>

    <div class="col-md-5">
      <h5>VISITS</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Schedule a new visit</a>
        <table class="table table-sm">
          <tr>
            <th>Animal</th>
            <th>Drop-off</th>
            <th>Pick-up</th>
            <th>Edit</th>
            <th>Delete</th>
            <th>Confirmation</th>
          </tr>
          <td></td>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Edit</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>

        </table>
      </div>
    </div>
  </div>

Answer №4

Perhaps considering implementing the row class could be beneficial for your situation?

<div class="row">
<!-- Your tables code here -->
</div>

Answer №5

Give this a shot:-

try using display:inline-block

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

The text input field is unresponsive and unable to be selected in the mobile layout

I have implemented this <textarea> component within my web application <div class="col-xs-11 lessSpaceBetweenLine"> <textarea class="form-control actionitems" id="actionitems" name="actionitems" rows="2" pl ...

html

Exclusive bug discovery: figcaption mysteriously disappearing in Safari browser

Having a CSS dilemma on my personal portfolio website that has me stumped. I’ve been using the and tags to switch from an image to a caption/button upon desktop hover or mobile click. It's working smoothly on all browsers except for Safari iOS. W ...

htmlcssmobile-safaribulmafigcaption

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Animating a group of images with JQuery

Hey there! I've been working on a simple animation for my webpage, but I'm having some trouble getting it to work the way I want. You can check out my page at . What I'm trying to achieve is having each image appear at its final position an ...

javascriptjqueryhtmlcssjquery-animate

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

javascriptjqueryhtmlvbscriptoutlook

Understanding how to extract a specific value key from a JSON object in Typescript while utilizing Angular can greatly

I'm currently facing a challenge in Typescript with Angular where I need to retrieve a specific value from a JSON constant. While I am aware of the performance implications, I am wondering if there is a more efficient way to access this value within t ...

htmljsonangulartypescriptfrontend

What is the process for transferring a folder to public storage in Laravel?

I've been attempting to upload and save a folder (which contains several files) into my local directory, but I'm encountering difficulties. Below is the input form I have: <input type="file" name="folder" id="folder&q ...

phphtmllaravel

Tips for capturing text input from a Quill rich text editor div

My attempt to retrieve the content entered in Quill editor's editor div using jQuery codes is not proving successful. Although it works for other text inputs, it fails to do so for the editor div. Below is a demonstration of the issue: $(function() ...

javascriptjqueryhtmlquil

Implementing Twin Modals Positioned Side by Side with Bootstrap

My dilemma involves creating two side-by-side modals using Bootstrap's grid logic. I have successfully implemented a single modal with the following code: <div class="modal fade bd-example-modal-lg" tabindex="-1" id="my_modal" role="dialog" aria- ...

javascriptcssbootstrap-modalbootstrap-4

Develop a complete webpage through Node.js programming

Currently, my node.js server successfully renders a web page when accessed through the browser. However, I am looking to generate this HTML page programmatically within the node.js code itself. I have attempted using http.request("http://localhost:8000/") ...

htmlnode.js

unable to retrieve data using ajax

Having some trouble with my ajax code that is supposed to print values: success: function(returndata) { $('#first').html("<div id='first' class='progress-bar progress-bar-primary' role='progressbar' aria-valu ...

javascriptjqueryhtmlcssajax

Transform the jQuery Mobile slider into a jQuery UI slider and update the text

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function modifycontent() { if (document.getElementById("slider").value<33) { $("#1").fadeIn("slow"); $("#2").fadeOut("slow"); ...

javascriptjqueryhtmljquery-uislider

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

Tips for retrieving the file name from the <input type="file" tag within a JSP page

I am looking to retrieve the file path from an HTML input type="file, which is selected by the user in the file dialog. <script> function OpenFileDialog(form) { var a = document.getElementById("inputfile").click(); SampleF ...

javascripthtmljspservletsfile-upload

How can I use Bootstrap to center footer text and display two images on the right side?

Looking for some assistance with the footer on my webpage. I would like to center the text in the footer with two images positioned on the right side. Thank you in advance. Footer Below is the code I am currently using: <div class="CopyRightFoote ...

htmlcsswordpressbootstrap-4

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

htmlcss

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

I am facing a problem where the entire array is being passed as an argument when I call onchange after getting correct values in the dropdown. Instead of only receiving the selected value, e contains the whole array. Here is the code snippet that demonst ...

javascripthtmlreactjsdropdown

Mounted class not initiating transition in Vue.js

After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...

javascriptcssanimationvue.jscss-transitions

Steps to disable all fields if the previous field is set to its default value and the default value is currently selected

As a newcomer to AngularJS, I have successfully disabled fields based on previous field selections. However, my goal is to set the default value of "ALL" for all fields (country, state, city). If the country value is set to "ALL," then the state and city ...

htmlangularjs