Creating clean and organized spacing between boxes using Bootstrap

Having recently started working with Bootstrap to enhance my skills, I've encountered a hurdle. I have 6 boxes arranged into three on the left side and three on the right side. However, I've noticed that there is a space between box number '4' and '5' when viewing on 'sm, md, lg' screen sizes. How can I position box number 5 directly under box number 4 without any blank space in between? Is there a way to remove the white space while maintaining the current layout?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  
 .box{
  width:30%;
  height:250px;
  border: solid black 1px;
  }
   .boxx{
  width:100px;
  height:100px;
  border: solid white 1px;
  }
   .bo{
  width:50%;
  height:550px;
  border: solid black 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<body>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx mx-auto">
            white space 
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box mx-auto">
            2
        </div>
    </div>
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="bo mx-auto">
            3
        </div>
    </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box mx-auto">
            4
        </div>
    </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx mx-auto">
            white space 
        </div>
    </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="box mx-auto">
          5
      </div>
    </div>
    </div>
</body>
</html>
   
</body>
</html>

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://examplecdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://examplecdn.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://examplecdn.com/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://examplecdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  
 .box{
  width:30%;
  height:250px;
  border: solid black 1px;
  }
   .bo{
  width:50%;
  height:550px;
  border: solid black 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="box mx-auto">
            2
        </div>
    </div>
     <div class="col-md-6">
        <div class="bo mx-auto">
            3
        </div>
    </div>
  <div class="col-md-6">
        <div class="box mx-auto">
            4
        </div>
        <div class="box mx-auto">
          5
      </div>
    </div>
    </div>
</body>
</html>
   

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

What is the best method for generating a comprehensive list of xpaths for a website utilizing Python?

Method I Attempting to generate a hierarchical tree of all the xpaths within a website () using Python, I initially aimed to acquire the xpath for the branch: /html/body with the following code: from selenium import webdriver url = 'https://startpag ...

Designing a dynamic wizard layout using Bootstrap 4 tabs, however encountering issues with the button functionality limited to a

My goal is to create a seamless navigation experience between tabs. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/b ...

Embedding HTML React project content onto a webpage using a script

I work for a company that specializes in event management, and we are looking to implement a "content builder" on our event portal. The project involves using React and Next. How can we create a code that allows event organizers to embed their events on ...

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

These are the functions I have created: function type(message) { document.getElementById("body").innerHTML="<div id=\"textbox\" class=\"textbox\"></div><div id=\"oc\&q ...

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

Locating an Image and Adding it to a Different Image Source

Here is the HTML markup that I am working with: <div id="main"> <div id="slider"> <img src=""/> </div> <div class="clear slider"></div> <div class="slider ndslider"> <a href="# ...

Scouring through the text to find a specific word and bring it to the forefront

I need help creating a PHP script that can analyze a text input, which could be an extensive essay, and search for a specific word entered by the user. The script should display the entire text with the searched word highlighted whenever it is found. < ...

What is the best way to create a table by selecting a number at random from a shuffled array of 16 numbers and then incorporating it into the HTML code

I'm trying to display a table in HTML with 16 cells containing numbers from 1 to 16 in a random order. I am having trouble implementing the part where I need to pop a number from the array. Any help would be greatly appreciated :) Here's the cod ...

Adjusting color in yii by utilizing html

Is there a way to customize the color of error messages in YII view using HTML? I have the following code, but I'm unsure how to combine the echo and html command. foreach ($inventoryModelsAndResults as $result) { echo implode(", ", $result["da ...

The spacing in MUI Grid results in the grid having extra left padding

I'm having trouble creating a grid with a group of elements, specifically when I try to add spacing between them. Take a look at the image below with spacing={0} set on the Grid container: No spacing in Grid container Now, here's what happens wh ...

Is it not possible to update the innerHTML stored in a variable in real-time?

I am attempting to link a div's text with a variable that changes its value based on different button clicks (using plain JavaScript), but I am struggling to update the inner HTML dynamically. It only displays the initial value set on page load. What ...

Implement HTML code within WordPress labels

Seeking assistance with customizing certain menu items in a WordPress website. Wondering if it's feasible to include HTML/CSS in the title label? My current situation is as follows: I only want one result to be highlighted in blue. I attempted to ...

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

Enhancing transparency with a touch of background color

After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...

Combining D3.js tooltip positioning with CSS overflow styling

I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem? CSS code: #chart1 { overflow-x: auto; overflow-y: hidden; max-width: 800px; max-height: 22 ...

Issues with loading an external CSS file in an HTML document

I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...

Combining Isotope, infiniteScroll, Wordpress, and Bootstrap is a powerful formula

Attempting to accomplish a rather straightforward task... The scenario involves a custom-post-type archive page in Wordpress where I display ten posts per page with pagination. I utilize isotope js for div packing and employ next_posts_link() to create a ...

Ways to remedy the white line produced by CSS transform when hovered over?

Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover? I've tried various solutions such as: transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preser ...

What could be causing my custom cursor to malfunction?

I've been attempting to customize the cursor image, but despite following all provided instructions, it's still not working: CSS: body, html { margin: 0px; padding: 0px; border: 1px solid red; cursor: url(images/rsz_red_crosshair.gi ...

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Currently, I am in the process of developing an HTML editor for a project. I have downloaded a program online that I am attempting to customize according to my requirements. However, I am encountering difficulties when trying to retrieve the inner HTML of ...