Increase the spacing of the Bootstrap grid layout without affecting the overall dimensions

Is there a way to create space around the border of a bootstrap grid without causing elements to shift and break the layout? I have tried using :after but it doesn't seem to work. Any suggestions on how to achieve this?

HTML

<div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>
<div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>
  <div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>

CSS

.sectionstyle {
  position : relative;
  border: 1px solid grey;
  border-radius: 1%;
  padding-bottom: 2%;
  background-color: tan;
  box-sizing: border-box;
  //margin:1px;
}
.sectionstyle:after {
  margin:5px;
}

JSBIN

http://jsbin.com/xicezopiqe/1/edit?html,css,output

htmlcsstwitter-bootstrap

Answer №1

When working with the elements inside the .col-sm-4 divs, it is typical to...

For a better understanding, please refer to this updated jsbin

I have formatted it in a way that aligns more closely with the standard usage of bootstrap grids. If you prefer not to have gutters, Naeems answer offers a good alternative.

Hope this helps,

-Ted

Answer №2

Check out this: http://jsbin.com/tipasehalu/1/

Incorporate a box-shadow inset as a border, and change the color of the border to appear white, creating the illusion of a gap between elements.

.sectionstyle {
    position : relative;
    border: 1px solid #fff; // acting as a gap(margin)
    border-radius: 1%;
    padding-bottom: 2%;
    background-color: tan;
   box-shadow: inset 1px 1px 1px grey;  // acting as a border
    box-sizing: border-box;
    //margin:1px;
}
.sectionstyle:after {
  margin:5px;
}

While it may not be an actual margin (gap), it certainly gives off that effect.

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

Sharp writing displayed over a 3D-transformed object in the Safari browser

My challenge now is to position text on top of elements that have been transformed using -webkit-transform:translate3d(). The issue I've encountered is that the only effective method I've found to stack an element on top of a 3D-transformed objec ...

safari3dcsstransformation

What is the best way to showcase images in a horizontal layout with the help of PHP and

Does anyone know how to retrieve images from a MySQL database and display them in rows of three horizontally, while also having a relevant image show on top? I'm struggling with this task. Below is the code snippet for the main div: <div class="co ...

phphtmlmysqlcss

Challenges encountered when extracting colors from an object/model using ngStyle

I created a unique shape using html/Css and now I want to fetch its color from a data service. [ngStyle]="{'background-color':'#0B0036'}" Everything works perfectly when I use the above code. However, when I try either of the followin ...

htmlcssangularangular-template

What is the best way to store dynamic table data into an array?

After successfully implementing functionality for inputs, I am now facing some trivial errors that have slipped my attention. My script appears as follows: <script type="text/javascript"> $(document).ready(function () { $('#clicke ...

javascriptjqueryhtmljson

Shifting shadow transition effect when hovering over the box

I'm attempting to create a slide animation effect with box-shadow over an image, where the black background moves from left to right. However, I am facing a strange blinking issue that I can't seem to resolve even after searching for solutions on ...

csshovertransitionslidebox-shadow

Measuring the number of words within HTML files

Currently, I am trying to analyze word count in HTML articles using R. Scraping the data such as titles and downloading the articles has been successful so far (as shown in the code below). Now, my goal is to count the occurrences of a specific word like " ...

htmlrweb-scraping

Align elements vertically with React-Bootstrap by using the built-in functionality for center

Struggling to vertically center and center align elements using bootstrap, even with react-bootstrap col and row components. You can view my code on Codesandbox: Link Here is the code snippet: import React, { PureComponent } from "react"; impo ...

cssreactjstwitter-bootstrapbootstrap-4react-bootstrap

A guide on seamlessly transitioning from a mobile website to the corresponding native app

I am currently working on a mobile website project. This website is built using basic HTML and is accessed through a URL on a web browser, not as a native app or through PhoneGap. The client has requested links to their Facebook, Pinterest, YouTube, Twitt ...

javascriptandroidhtmliosfacebook

When utilizing the ::first-letter pseudo-element on <sub> and <sup> tags

Why is the <sub> and <sup> not supporting the ::first-letter CSS pseudo-element? Any solutions? p:first-letter, sub:first-letter, sup:first-letter { color: red; font-weight: bold; } <p>This text contains <sub>subscript</su ...

javascripthtmlcss

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

javascriptjqueryhtmlajaxgrid-layout

Scroll along the menu smoothly, without causing any disruptions to the rest of the page

I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down. If this description isn&apos ...

jqueryhtmlcssinterfacemenu

Using Javascript to handle form submission and enforce required input fields

Has anyone encountered an issue when trying to submit form data using a div, HTML5, and JavaScript? I noticed that if I use a submit button with the required attribute in the inputs, the validation works but the button doesn't actually submit the info ...

javascripthtmlforms

What could be causing my dash/hyphen character to vanish when using JavaScript on my website?

I'm on a mission to swap out spaces with dashes or hyphens in JavaScript. I've managed to write most of the code that inserts dashes after each space between characters (without creating double dashes), but as soon as I add another character, the ...

javascripthtml

Guide to Styling List Items with Icons and Titles

Is it possible to align two elements to the left and two to the right within a list item (li)? The li is part of a page utilizing Bootstrap framework and FontAwesome project. You can see an example here: Below is the code for the li: <li class="list ...

htmlcsstwitter-bootstrapbootstrap-4

Picture failing to adjust to the designated width

I am struggling with an issue on my website where the images in a section are not scaling properly in two columns. Even though I have set the margins and widths in my media query for a viewport of 640px or less, the images do not adjust in size when draggi ...

imagecss

Ensuring the security of updated data

As I explore various websites, including SO and my own, I have noticed a common practice of storing row IDs of data retrieved from a database in an HTML attribute. This data can be manipulated by the user on the client side and potentially sent to the serv ...

phphtmlmysql

Border for status input like on Facebook

I tried to investigate with Firebug, but struggled to find a solution. How does Facebook wrap the border around the autosize input in the status section? I am particularly curious about the small triangle attached to the border. While using Firebug, I loca ...

htmlcssfacebookinput

To retrieve the id value stored in the database, you can use the onclick JavaScript event within the input tag

I have a piece of code that's successfully working for one function, but I want to approach it differently this time. Here is the code I'd like to use as inspiration: <td> <a href="javascript:edit_id('<?php echo $row[0]; ?& ...

javascriptphpjqueryhtmlonclick

The challenge of character encoding when utilizing a combination of HTML5, jQuery, PHP

A webpage using HTML 5 has the following code in the header: <meta charset="utf-8"> Within the same page, an Ajax request is made using jQuery in the following manner: $.ajax({ url: "ajax/subscribe.php", type: "POST", encod ...

jqueryajaxhtmlcharacter-encoding

Is there a way to include space at the beginning of a form label with react-bootstrap?

I am currently working on incorporating a form that is perfectly centered on the page, featuring standard login fields for both email and password inputs. Strangely enough, the label for the email input appears to be getting prefixed with an additional spa ...

javascripthtmlcssreactjstwitter-bootstrap