Decreasing the space between columns in Bootstrap 3

My objective is:

However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller):

The problem lies in the gutter size which is determined by padding, as indicated by the grey area in the image above. I want each section to have a consistent size of 15px.

The specific code I am mentioning is where the 'groups-margin' class sets the bottom margin for each button:

<div class="row">
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 1 <span class="group-stations-count">Stations: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 2 <span class="group-stations-count">Stations: 1</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 3 <span class="group-stations-count">Stations: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 4 <span class="group-stations-count">Stations: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 5 <span class="group-stations-count">Stations: 4</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 6 <span class="group-stations-count">Stations: 6</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 7 <span class="group-stations-count">Stations: 7</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Group 8 <span class="group-stations-count">Stations: 2</span></a>
                </div>
            </div>
htmlcsstwitter-bootstrapgutter

Answer №1

To organize your layout better, enclose your col-sm-6 within a div element with the class .input-row:

<div class="row">
    <div class="input-row">
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 1 <span class="group-stations-count">Stations: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 2 <span class="group-stations-count">Stations: 1</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 3 <span class="group-stations-count">Stations: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 4 <span class="group-stations-count">Stations: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 5 <span class="group-stations-count">Stations: 4</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 6 <span class="group-stations-count">Stations: 6</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 7 <span class="group-stations-count">Stations: 7</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Group 8 <span class="group-stations-count">Stations: 

                        2</span></a>
                </div>
    </div>
</div>

If you are using col-sm-, make sure to include the following properties inside a media query:

@media (min-width: 768px){
    .input-row .col-sm-6:first-child{padding-right:7.5px;}
    .input-row .col-sm-6:last-child{padding-left:7.5px;}
}

With the above setup, all gutters (left, right, and middle) will be set to 15px.

You can view a demonstration of the code on jsfiddle here: http://jsfiddle.net/AndrewL32/65sf2f66/47/

Answer №2

To specifically increase the gutter size for a particular section, you can define a class for it.

.btn .gutter{
   margin-bottom: 5px;
}

You can then easily incorporate the gutter by using the defined classes like this:

<a class="btn btn-primary btn-md gutter">some button</a>

Answer №3

One of the ways I customize Bootstrap is by adding my own row classes while keeping the original Bootstrap classes intact. For example, I might create these custom row classes:

.row-half-gutter {
  margin-right: (@grid-gutter-width / 2) * -1;
  margin-left: (@grid-gutter-width / 2) * -1;

  > [class*="col-"] {
    padding-right: (@grid-gutter-width / 4);
    padding-left: (@grid-gutter-width / 4);
  }
}

.row-no-gutter {
  margin-right: 0;
  margin-left: 0;

  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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 to retrieve a global variable from two separate PHP files?

Within file1.php, there is a variable: global $name; $name = ""; In the same directory, within file2.php, there is: <label> <span>Username:</span> <input id="name" type="text" name="username" value ="<?php echo $GLOBALS[& ...

phphtmlforms

Converting Scalable Vector Graphics to Hypertext Markup Language and

So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...

htmlcsssvg

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

Steps to display text in a div upon clicking on an image

I am trying to create an image with two DIVs separated by a black line. The left DIV will contain 4 images, and I want the following functionality: When a user clicks on any of the buttons in the left DIV, a corresponding text should be revealed in the ri ...

javascriptjqueryhtml

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

javascripthtmlcss

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

Horizontalize your lists

Is there a way to make the li elements horizontal in this pagination setup? I've attempted display: inline and display: float, but neither seem to be working for me. <ul class="pagination" style="display:inline; text-align: center; margin:0;">& ...

htmlcss

CSS classes designed to mimic JavaScript object attribute-value pairs

I stumbled upon some interesting css class-value combinations within HTML tags. It seems like a specific JavaScript code is interpreting this, but it's something I haven't encountered before. I came across this on www.woothemes.com/flexslider/ (y ...

javascriptcss

Does IE 9 support Display Tag?

Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...

htmlcssinternet-explorer-8internet-explorer-9displaytag

Dropzone failing to verify the maximum file limit

I am currently using dropzone to upload files on my website. I have limited the number of files that can be uploaded to a maximum of six. The code works perfectly when uploading one image at a time, but if I select more than six images by holding down the ...

javascriptjqueryhtmldropzone.js

data-abide is flagging all fields as incorrect

Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...

htmlruby-on-railsrubyzurb-foundation

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

My code is currently experiencing an issue - I'm trying to figure out how to center a

Can anyone help me troubleshoot the code in my attempt to make an image responsive and center it? I've been struggling with this issue and can't figure out what I'm doing wrong. Here's an example of how it currently looks on my screen: ...

csstwitter-bootstraptwitter-bootstrap-3

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

Positioning children in CSS Flexbox: one at the top and the

Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...

htmlcssflexbox

Interactive Material Icons with Hover Effects in CSS

I'm having trouble adding a hover effect to material icons in my code. Despite everything else looking good, the hover effect is not working as expected. Below is the code snippet I've been using: import ManageAccountsIcon from '@mui/icons-m ...

cssreactjsuser-interfacematerial-uihover

Ways to center a spinner on the screen using CSS during loading

Upon loading the page, my spinner appears in the center of the screen after a second. However, in the initial frame of the page, it is not centered but positioned on the top-left corner instead. How can I ensure that my spinner starts off centered from the ...

htmlcssangulargif

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

htmlcssinputcheckboxstyles

Positioning Multi-level Drop Down Div in Javascript - How to do it efficiently?

I'm currently working on a horizontal menu using CSS and JavaScript with multiple levels. I've implemented a toggle function to show the submenu container, but it's causing the links below it to be pushed down. Is there a way to make the dis ...

javascripthtmlcss

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms