spacing within Bootstrap's divs

While working on a grid layout using Bootstrap styles, I encountered an issue with the col-sm- * classes where the divs appeared too close together and the shadow effect I applied was getting lost. Adding margin to the div helped but caused the last div to break off, which was not what I intended. Some suggested using the border property to address this, but I needed it for other purposes. I also considered using the outline property to blend it with the background color, but I am still unsure of how to implement it properly. Here is a comparison before and after adding margin.

Upon researching on SO, I found many solutions involving the border property, but as mentioned earlier, I had already allocated it for different functionalities.

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

<div class="container">
  <div class="row">
    <div class="col-sm-4 shadow p-5 bg-light border">
      CONTENT
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      CONTENT
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      CONTENT
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      CONTENT
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      CONTENT
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      CONTENT
    </div>
  </div>
</div>

cssbootstrap-4

Answer №1

To create a stylish layout, consider utilizing an inner div with padding as demonstrated below:

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

<div class="container">
  <div class="row">
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>

  </div>
</div>

Answer №2

I concur with Chiller.

Another approach is to adjust the Bootstrap's width of col-sm-4 from 

flex: 0 0 33.333333%;
max-width: 33.333333%;

to 

flex: 0 0 32.333333%;
max-width: 32.333333%;

(or smaller) and specify justify-content: between in the outer row

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<style>
  .col-sm-4 {
    -ms-flex: 0 0 32.333333%;
    flex: 0 0 32.333333%;
    max-width: 32.333333%;
  }
</style>

<div class="container">
  <div class="row justify-content-between">
    <div class="col-sm-4 shadow p-5 bg-light border">
      ITEMS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      ITEMS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      ITEMS
    </div>
  </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

How to remove an image input type using jQuery

Can anyone provide insight into the issue with these scripts? I am attempting to remove an input when it is clicked. The input is of type image, so CSS cannot be used. I have tried using JavaScript but it doesn't seem to be working. HTML <!doctyp ...

javascriptjqueryhtmlcss

Explore the functions of jQuery's .css() method and the implementation of

Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

jquerycss

Steps for modifying form entries in a modal

I have a form that is accessed via a modal as described in the following code snippet. By clicking on new-lesson-plan-modal, I am able to use the generated form to input a new post entry, which will then be displayed back on the HTML. My query revolves a ...

htmldjangobootstrap-4

My custom font is not compatible with the browser on my asp.net site

I'm having trouble embedding my own font in my .aspx file. Google Chrome and Firefox don't seem to support the font, while IE does. Can someone please provide guidance on how to successfully embed the font in an asp.net page? Below is my code: ...

javascripthtmlcssasp.netfonts

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

jqueryhtmlcss

JavaScript disrupting CSS animations

I've just embarked on creating a simple landing-page website. One component of the page is a basic image slider with navigation controls powered by JavaScript. I managed to get everything functioning except for achieving a smooth transition between im ...

javascripthtmlcss

Is it possible to create a dynamic <hr /> using Flexbox?

In the midst of working on my application, I managed to achieve a simple layout. However, there is one peculiar requirement that has been eluding me for the past 2 days and now I find myself in need of assistance. Here is the current HTML code I am workin ...

javascripthtmlcssangularflexbox

Collapsible menu causing inline form elements to shift downwards

I am struggling with my inline Bootstrap 5 form that includes a collapsible menu for advanced search. The issue I'm facing is that when I open the advanced search menu, it pushes down box 1 and 2 instead of neatly expanding below. I tried setting the ...

htmlcssformsbootstrap-5

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui

What is the best way to add animation to switch between table rows?

I am looking to add animation effects when table rows appear and disappear. Initially, I attempted using a CSS transition, but it did not work due to the change in the display property. Subsequently, I opted for an animation, which provided the desired o ...

csscss-transitionscss-animations

Use CSS to align bullet points to the left

Striving to achieve perfect left alignment of bullet points using html and css has proven challenging, especially when font sizes are altered. To address this issue, the list-style-position property must be set to outside. Attempts with the inside setting ...

htmlcss

Encountering a permission error when attempting to save the index.php file?

We encountered an issue when trying to save the index.php file on FileZilla. The error message displayed was: Error: /home/devratnacricket/public_html/admin/index.php: open for write: permission denied Error: File transfer failed What steps should we t ...

javascriptphpjqueryhtmlcss

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Is it possible to have a button next to the textarea that allows you to hide and unhide the text inside the textarea by clicking on it? ...

javascripthtmlcss

Guide to making a segmented bottom border with html and css

I am working on styling a span for a restaurant name that requires a unique border-bottom design. I want to divide the border into two sections without overlapping the text below, similar to the image shown here: https://i.sstatic.net/bPvwQ.jpg Can anyone ...

htmlcss

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

javascripthtmljquerycss

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs

I'm looking for a JQuery plugin that can lock an element in place as you scroll through a webpage

My query is not regarding position:fixed. While scrolling down the page, I aim for the element to move down along with the page until it goes beyond the view of the browser. Once it goes out of the view, it should stay close to the top of the page, yet st ...

javascriptjqueryhtmlcss

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

Creating a dynamic and engaging full-width carousel slider using Bootstrap

I am currently utilizing the Mobirise Website Builder and am in the process of figuring out how to create a full-width Bootstrap carousel similar to the example shown at this link: My goal is to have the carousel at the top of the screen, covering only 50 ...

htmlcssbootstrap-4slidercarousel