Column with space between arranged rows in a container

I have a container with multiple rows, each containing several columns. I am looking to adjust the spacing between each column

<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col-md-4 card ">
        Column 1
      </div>

      <div class="col-md-4 card">
        Column 2
      </div>

      <div class="col-md-4 card">
        Column 3
      </div>
    </div>
  </div>
<div>
cssbootstrap-4

Answer №1

When you want columns with equal width and horizontal margins, instead of using col-x classes in Bootstrap, simply use the col class to achieve this effect.

For example:

.card {
      border: solid; /* to show where they are */
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
       <div class="main" style="margin-bottom:0px">
          <div class="container">
            <div class="row">
              <div class="col card mx-1 ">
                Column 1
              </div>

              <div class="col card mx-1">
                Column 2
              </div>

              <div class="col card mx-1">
                Column 3
              </div>
            </div>
          </div>
        <div>

Resources:

https://getbootstrap.com/docs/4.0/utilities/spacing/

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

This is why the mx-1 class is added.

https://getbootstrap.com/docs/4.0/layout/grid/ where you can find the col class which is used to auto-size the columns. If all boxes receive the col class, they should be of equal width.

Answer №2

<div class="container">
<div class="card-deck text-center mb-5">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">example</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">example</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">example</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
</div>
</div>

I created this template using cards, I believe it fits your requirements perfectly. Please let me know if you need any more adjustments! :)

Answer №3

To create space around an element using CSS, you can use the margin property.

.card {
  margin: 0px 10px;
}

Here is a working example:

.card {
  margin: 0px 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col col-md-4 card ">
        Column 1
      </div>

      <div class="col col-md-4 card">
        Column 2
      </div>

      <div class="col col-md-4 card">
        Column 3
      </div>
    </div>
  </div>
<div>

Answer №4

When using Bootstrap columns, there is no space between them. To create space within a column, you can include another div inside it. By default, a column of 4 has a padding of 15px, which means that if you add a div inside it, there will be space on both the left and right sides.

<div class="col-sm-4">
   <div class="inner">
     Your Content Here
   </div>
</div>

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

Using Jquery for conditional statements: if versus else

$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...

jquerycssif-statement

What could be causing the issue preventing me from applying a border in the code below?

There seems to be an issue in the code below where I am struggling to apply a border Can anyone help identify what the problem might be? <!doctype html> <html> <head> <title> My first Navigation Page</title& ...

htmlcss

The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; } Html <div class="form-check d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" value=&quo ...

cssbootstrap-5

Trouble with Bootstrap 5 Carousel swipe functionality: Issues arise when inner elements with overflow are involved, causing vertical scrolling to interfere with left to right swipes

I've been scouring the internet for answers to my unique issue with a Bootstrap 5 carousel. My setup is fairly basic, but I've removed the buttons and rely solely on swiping to navigate through the carousel items. When I swipe left to right, eve ...

javascriptcsscarouselbootstrap-5

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

javascriptcssreactjsmaterial-design

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

cssreactjsbootstrap-4

Unable to Display Bootstrap 4 Navbar on Hamburger Menu

I am having an issue with my mobile-sized site. Whenever I click the hamburger menu, the Navbar does not appear. I have double-checked and my data-target matches the nav id, so I am not sure why it is not working. <section id="nav"> <na ...

htmlbootstrap-4

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

cssangulartypescriptbrowserreload

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

javascriptcssreactjsstate

Can you tell me about the feature called "Inspect Browser" box?

Can you identify the significance of this enigmatic purple box while inspecting elements in the browser's developer tools? It does not correspond to padding, margins, or borders, yet it seems to be occupying space within the designated div. [1]: http ...

cssinspectweb-inspector

The date selection tool is failing to appear on the screen

I successfully created a date picker using Bootstrap. Here is the code: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <s ...

jqueryhtmlbootstrap-4

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...

javascripthtmlcsszurb-foundation

Select an HTML element that does not have a class or ID attribute

Is there a way to select and apply styles to a div that is nested within another div without any id or class? <div class="wrapper"> <div> </div> <div> </div> <div> </div> </div> Wh ...

htmlcss

Position the Bootstrap button on the right side

this is the code I am working with: <p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p> <br /> <div class="border text-center"> <p class="h5 text-center">Durc ...

htmlcsstwitter-bootstrap

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss