Adjust the gap between row-fluid spans

Is there a way to adjust the margins between row-fluid spans while keeping them responsive? I am aware that margins are in percentages, but I want to achieve an approximate margin of 15px on wider screens. I tried changing the margin-left to 1.8% using Firebug, and it worked fine. However, when I reload the site, all the spans are aligned one after another.

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Answer №1

To adjust the spacing between your elements in Bootstrap's CSS, simply modify the @gridGutterWidth, @gridGutterWidth768, and @gridGutterWidth1200 settings found at this link:

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

Reorder elements in CSS Grid

I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way. Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4 ...

I would like to use a tabset row to showcase buttons in Angular 2

I need to arrange a tabset and buttons in a single row. The tabset is already displayed, now I just need to add the buttons. <div class="form-group col-sm-8 "> <div class="col-lg-8" style="margin-top:35px;" > <h6 class="text-rig ...

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

I am encountering an issue with my dropdown menus. I have 2 dropdown menu items under the same parent dropdown class. However, when I click on dropdown action 1, it displays the body of dropdown menu 2 items instead. <!DOCTYPE html> <html> < ...

How can users of TinyMCE customize their background color?

I recently integrated iBrowser into my site's TinyMCE editor to allow users to upload graphics, which is working fine. However, I'm struggling to enable them to change the background image of the pages they are editing. Whenever I try adding a di ...

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

What is the best way to coordinate text and photos within Bootstrap?

Currently, I am working on a bootstrap website that features a slideshow with 3 photos. The jQuery function responsible for this is as follows: $(function () { $.vegas('slideshow', { backgrounds: [{ src: 'img/ph1.jpg ...

Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background? Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear. https://i.ss ...

Guide on how to navigate through sub-sections within a larger section

I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin th ...

After applying CSS, I am unable to click on the radio buttons

Even after selecting the other two, it still defaults to the first one. Here is my code: input[type=radio] { display:none; } input[type=radio] + label:before { content: ""; display: inline-block; ...

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

Stretch the div to the right and maintain its horizontal width

I am in the process of coding a two-column layout, with a total width of 980px. Each column will have a background that expands all the way to the left and right sides as shown in the screenshot here. On the left side, there is a blue div with a width of ...

Locate the ancestors of a specific element inside a designated container

Reviewing my code, it contains... <div class="container"> <div id="tropical"> <div class="info"> <div class="desc"> <p>Lorem ipsum.......</p> ...

Arranging elements on the top of an image

I am struggling to replicate a design and align some items properly without resorting to absolute positioning. The design I want to achieve looks like this https://i.sstatic.net/HaOXT.jpg https://i.sstatic.net/EovkI.jpg The grey area represents a section ...

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

Ensure all boxes have equal heights

I'm using Boostrap 5 and I have four boxes that are not cards. How can I ensure they are the same height, considering the dynamic content? You can access the Codepen for more information: https://codepen.io/Deluxe23/pen/gOXJWwG Below is an excerpt o ...

What is the best way to ensure that my dynamically generated div shows up within the container div?

Web Development <div id="container"> <div id="wrapper"> </div> <span id = "waveNum">Current Wave: 0</span> <input type = "button" value = "Start Game" onclick = "startGame()"></input> </div> ...

Positioning divs next to each other in CSS and setting the width of the second

I am attempting to position two divs next to each other. The initial one is 200x200 pixels and the second one should be positioned 10 pixels to the right of the first one. The second div has a height of 200 pixels, and its width needs to extend all the way ...

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

overlapping text placed directly above another text

Is there a way to place a text fragment above another part of the same line? <div>Th<div class="ac">Am</div>is is an ex<div class="ac">E</div>ample line</div> If implemented, it should display as: Am E This ...