Issue with Bootstrap 5 grid system, div falling down

I'm having some trouble with my HTML code here.

<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">1</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">2</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">3</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">4</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">5</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">6</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">7</div>

My intention was to have 2 divs displayed side by side, but instead, the second div in the row is dropping down. Could this be due to margins between divs or something else?

Any help or advice would be greatly appreciated.

Answer №1

One reason for the issue you're facing could be that the columns are not wrapped within a container and row structure. Here's how it should be done:

<div class="container">
  <div class="row">
    <..... your columns here ....>
  </div>
</div>    

By using this structure, you ensure that the Bootstrap columns respond effectively.

When columns are placed next to each other, their backgrounds touch, leading to a seamless color effect. However, you can prevent this using some CSS:

.col-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
  background-clip: content-box;
}

Apply this style to each column individually. Take a look at this example: https://codepen.io/kikosoft/pen/VwBZWQK

The background-clip: content-box; property is key here. It ensures that the background doesn't spill behind the padding border, a useful CSS feature.

In a typical Bootstrap setup, you wouldn't assign a background color to a column. Instead, the column acts as a container for content which can have its own background color. When content has margins, the backgrounds won't overlap. Here's an example:

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="content-styling">1</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">2</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">3</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">4</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">5</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">6</div>
    </div>  
    <div class="col-6">
      <div class="content-styling">7</div>
    </div>  
  </div>
</div>    

Style the content like this:

.content-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
}

View the implemented solution here: https://codepen.io/kikosoft/pen/RwBbMoR

Answer №2

When working with columns in Bootstrap, it is important to always enclose them within a row class. The following code should work:

    <div class="row">       
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">1</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">2</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">3</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">4</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">5</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">6</div>
<div style="height: 100px;" class="col-6 bg-success mt-40 d-inline-block">7</div>
    </div>

Using padding is more efficient than margin. Remember that margin extends the sizing of the container, causing the col-6 class to increase in size and overflow to the next line.

On the other hand, padding is always inset and does not affect the flex sizing implemented by the col class. Try the code below:

    <div class="row">       
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">1</div>
</div>
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">2</div>
</div>
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">3</div>
</div>
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">4</div>
</div>
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">5</div>
</div>
<div class="col-6 p-4 ">
    <div class="bg-success inner-box">6</div>
</div>
    </div>

.inner-box{
    height: 100px;
}

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

Enhancing the layout of a bootstrap table: Creating space between rows while maintaining borders

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;} tbody tr{border:2px solid #256ac4;} td{ color: #8d9097; vertical-align: top; font-size: 14px;} th{text-align:left} <table> <thead> ...

jQuery seems to have difficulty selecting the text of a hyperlink's element using the text() or html() methods

I have a <a href=#>Title</a> link and it's the content in between <a href="#"> attribute that I am trying to target but haven't been successful using either the text() or html() jQuery functions. The text() method is returning ...

I am a newcomer to HTML and I am eager to display the selected options from a <select> element

Can someone help me display the selected licorice flavor, chocolate color, and topping? For example: "Green apple, white, christmas sprinkles." I'm not sure if assigning a numeric value to each option is necessary. I did it on a whim. Please suggest ...

Checking the validity of data before submission can help ensure the accuracy and security of your application

Is there a more effective method for validating input data in real-time as it is being entered into a form? One approach I am considering involves placing a DIV element next to the input field where users can see a message indicating whether their data is ...

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

jQuery for Implementing Pagination Across Multiple Tables

As a novice in the world of JavaScript and jQuery, I am struggling with implementing pagination for multiple tables on a single page. My goal is to have several tables that can be paginated using one navigation system. However, all my attempts so far have ...

Angular dynamically filling in a table with incomplete object data

I am currently working on a scientific project that involves displaying large amounts of data in tables. The experiments I'm working with have timestamps that follow this format: interface TimeData { time: string; data: {SD: string, SEM: string ...

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

Utilizing the GET method within a form

I'm currently working on testing a form to ensure that my input values are being submitted correctly. At this point, I haven't set up any server script yet. However, I was hoping that upon clicking submit, I would be able to see my values appende ...

Guide to creating a CSS horizontal line with square elements on either side of a title

I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design. https ...

Tips for utilizing the Ace editor validator without the need to create a new Ace editor instance

In my React application, I utilize react-ace to build a CSS text editor. The implementation looks something like this... import Ace from 'react-ace' ... <Ace mode="css" value={value} onChange={onValueChange} onValidate ...

Having trouble importing JS into HTML file with NodeJS

I have created a web server using NodeJS that serves the file index.html. However, when I attempt to add a JavaScript file to my HTML document, the browser displays an error message stating The resource "http://localhost:3000/includes/main.js" was blocked ...

Utilizing PHP for Substituting URLs within HTML

Is there a way to use PHP to eliminate an entire <iframe> tag that contains the link abc.com? If I searched the following code for abc.com: ‹iframe src="http://abc.com/abcd.html"›‹/iframe› ‹iframe src="http://abc.com/lmno.html"›‹/ifr ...

Django - I need to update the dictionary content when a button is clicked

I am trying to create a functionality on my HTML page where a number displayed increases by 1 every time a button is pressed. However, the code I have written so far does not seem to be working properly. Below is the code snippet: mypage.html <form met ...

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

Counting the number of elements in a list can be problematic when using Firefox

Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

I must arrange each item in a column vertically, regardless of whether they could align horizontally

As the title suggests, I am looking for a way to stack one element under another, similar to a chat application. Currently, when the message is long, it displays correctly, but if the text fits next to each other, it aligns in that manner. I require a solu ...