Decreasing the space between columns in Bootstrap 3

My objective is:

https://i.sstatic.net/UIPsq.png

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

https://i.sstatic.net/GbLFE.png

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

The intricate scripting nestled within the jQuery function

When using jQuery, I am looking to include more codes within the .html() function. However, I also want to incorporate PHP codes, which can make the writing style quite complex and difficult to read. Is it possible to load an external PHP/HTML script? fu ...

javascriptjqueryhtmlajax

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

Adding numbers in JSP

Is there a way to trigger a popup alert message when the user inputs a correct or incorrect value and clicks on the "Go" button? I'm unsure of how to link the "Go" button with the Java code. Please assist me. <%@ page import="java.io.*,java.util. ...

javahtmljsp

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

After updating my application to jQuery 3, I encountered an issue during testing. Everything seemed to be working fine until I reached a section of my code that used a '#' symbol in a selector. The jQuery snippet causing the problem looks like th ...

javascriptjqueryhtmldomjquery-selectors

I'm curious about the meaning behind this code snippet: `$Odd = ($Odd == "even") ? "odd" : "even";`. Any ideas?

<?php $Odd = "even"; $query = $MySQLi->query("SELECT id, look, username, motto FROM users WHERE rank = '7'"); if($query->num_rows > 0): while($UserRow = $query->fetch_assoc()) { $Odd = ($Odd == "even") ? "odd" : "even"; ?&g ...

phphtmlcssstringcontent-management-system

Increase the height of an element based on the content of the text within

Today I am facing a challenge: I need the text below to change when I click on one of these icons: https://i.sstatic.net/28xEF.png Luckily, it works with the following code: CSS .games-text { background-color: $color-primary; & p { m ...

javascripthtmljquerycssweb

Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...

htmlcss

Using the .val method on an input element modifies the HTML content without affecting the value displayed

Currently, I am working on validating the range input type by utilizing JavaScript along with jQuery's val method. While it successfully displays the output in HTML, I encountered an issue where changes to the value are not being logged in the console ...

javascriptjqueryhtmlvalidation

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

csshovercss-transitions

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

In HTML, an important concept to understand is how float:left is necessary when the combined widths of child blocks equal

Apologies if my question seems redundant, I was having trouble finding the right search terms. Let's discuss a scenario with a parent <div> containing two inline-block children, each with a width of 50%. If we don't apply overflow: hidden ...

htmlcss

Issues with Datepicker functionality in Bootstrap 5 are causing it to malfunction or not display

I am having trouble incorporating a timepicker on my webpage with bootstrap 5. The calendar feature isn't loading properly, preventing me from selecting any dates. I'm unsure if the issue lies with an error on my end or if the plugin isn't c ...

javascripthtmltwitter-bootstrapbootstrap-5

It is not possible to alter or manipulate dynamic content received from an Ajax/JSON response when creating a dynamic PHP form

I am in need of a dynamic form that functions as follows: Upon clicking the "ADD" button, a new <div> element should appear for selecting a package. Based on the selected package, the row should change its color by adding or removing certain classe ...

phpjqueryhtmlajaxjson

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

cssangularjstwitter-bootstrap

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

javascriptjquerycssfontsfont-face

Using JQuery to Load Text Content from Textarea into an IFrame

Seeking a solution to transfer HTML textarea content into an IFrame upon button click. Any suggestions on achieving this functionality? Thank you in advance. Illustratively, when a user types Hello World in the textarea and clicks the submit button, the t ...

phpjqueryhtmliframe

Tips on how to maintain the underline when text is split into two sections

Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...

htmlcssunderline

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss