I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313667d617d60">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="container-sm text-center gy-6 gx-6">
        <div class="row">
            <div class="col">
                <div class="p-3 bg-success">1x12</div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="p-3 bg-danger">1x6</div>    
            </div>
            <div class="col">
                <div class="p-3 bg-danger">2x6</div>    
            </div>
        </div>
        <div class="row">
          <div class="col">
           <div class="p-3 bg-warning">1x4</div>
          </div>
          
        ... (reduced for brevity) ...
      
</body>
</html>

I have attached a screenshot of the current page I am working on. Could someone please help me identify where I might be making a mistake?

I have tried adjusting the gutter values using 'gy-6' and 'gx-6' in Bootstrap, but the issue persists regardless of the value I use.

htmlcssbootstrap-5

Answer №1

In my experience working with bootstrap, I have noticed that padding, gutters, and margin classes are limited to five levels, such as .g-1, .g-2, .g-3, .g-4, .g-5. The same applies to p-1, p-2, p-3, p-4, p-5, and m-1, m-2, m-3, m-4, m-5.

Answer №2

Bootstrap 5 has gutter values ranging from 0 to 5. If you need a 6th gutter, use g-6.

To add an additional gutter, adjust variables.scss as shown below:

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
);

Ensure to customize the numbers according to your needs.

You can apply gutter classes to flex elements like the row class. Update your code as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e7eaeae1e6e1e7f4e5c090f2fef3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="container-sm text-center">
    <div class="row gy-6 gx-6">
        ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
  </div>
</body>
</html>

Instead of "gy-6 gx-6," you can also use the "g-6" class

Happy coding!!!

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

mandating the selection of checkboxes

Currently, I am exploring the possibility of automatically selecting a checkbox when an option is chosen from a dropdown menu. Below is a code snippet that demonstrates what I am aiming to tweak: $('.stackoverflow').on('change', func ...

javascriptjqueryhtml

Adjust the padding when hovering using CSS

Hey everyone, newbie here taking a crack at my first Joomla module! I've made some progress but hit a snag with my CSS styling - I think it's an issue with my selectors and my limited understanding of what's going on. Basically, I'm at ...

csscss-selectors

Rendering dynamic HTML content using EJS

I've created a blog application using Express and MongoDB, with EJS for rendering the data. My issue lies in the styling of the content to resemble a paragraph: <div class="show-post__content"> <%= post.body %> </div> The po ...

htmlnode.jsexpressejs

Why isn't Freichat displaying the name of the user who logged in?

After creating my own small social networking site, I decided to add a chat script called freichat. However, I am facing an issue where when a user logs in, their name appears as "Guest102" instead of their actual name. I am quite confused by this problem ...

javascriptphpjqueryhtmlmysql

Creating and formatting HTML pages

Trying to expand my knowledge of HTML, I decided to experiment with some basic code. I selected what seemed like a straightforward layout from a website, saved the source onto my desktop, and made some slight modifications. When I opened the HTML file in a ...

htmlbrowser

What is the best way to adjust inline svg to the user viewport size?

After working on integrating my interactive SVG maps into my HTML pages, I encountered a minor issue: when inserting my inline SVG into a standard, non-responsive HTML document, it automatically adjusts itself to fit nicely within the user's viewport. ...

htmlcsstwitter-bootstrapsvgsnap.svg

"Creating Search Engine Optimization friendly URLs: A Step-by-Step

Looking for ways to optimize my dynamic URL! http://www.example.com/hamlyn/page.php?id=14 Any suggestions on shortening or making it more search-engine-friendly? ...

phphtmlmysql.htaccess

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

javascriptjqueryhtmlcssdatatable

Certain iFrame instances are unable to display specific cross-domain pages

I'm currently working on a project to create a website that can embed external cross-domain sites, essentially like building a browser within a browser. I've been experimenting with using iFrames for this purpose: While it works for some pages, ...

javascripthtmlsecurityiframe

The jQuery scrollTop function seems to be malfunctioning following an ajax request

My ajax call is functioning properly, but I am experiencing an issue with the scrollTo plugin from JQuery. It is not positioning the content where I want it to be located below. //This function reveals the email body when a list item is clicked. jQue ...

jquerycssajaxjquery-ui

Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...

htmlcsstwitter-bootstrap

Combining two kebab-case CSS classes within a React component

import React from 'react'; import styles from './stylesheet.moudle.css' <div className={styles['first-style']} {styles['second-style']}> some content </div> What is the correct way to include styles[&ap ...

javascripthtmlcssreactjs

What is the best way to ensure that JavaScript is loaded in a specific sequential order?

I'm having trouble ensuring that JS files load in the correct sequence, despite my efforts to research async and defer on various platforms. This is the structure of my code: <script src="lang.js"></script> <!--loading either ...

javascripthtml

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

jqueryhtmlajaxformsfile

Seeking instructions on incorporating multiple components in a tab section effectively?

I am currently using a tab system that functions flawlessly. As I delve into learning VueJs, one concern has arisen in my mind about components and/or templates: Using the analogy of tab windows, how can I incorporate two components within a single tab, s ...

htmlvue.js

What are some ways to troubleshoot a dropdown box toggle switch in a website header?

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Contacts <span class="caret"&g ...

htmlbootstrap-5

Sequencing for importing in order to override Bootstrap 5 variables

When visiting the Bootstrap 5 documentation, they mention: Variable overrides should be placed after importing functions, variables, and mixins, but before any other imports. However, there seems to be a contradiction in their examples, as they provide ...

sassbootstrap-5

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4

Retrieve the input value closest to the selected row

I need to extract the price and currency value of a checked row containing a checkbox. The price is specified in a text box while the currency is selected from a dropdown menu. $(document).ready(function() { $('#test').click(function(){ ...

jqueryhtml

The content within the mat-card-content paragraph exceeds the boundaries of the mat-card container,

I recently began working with Angular Material and came across an issue. When I have a shorter text paragraph, it overflows the card. However, when I use a larger paragraph, the text wraps nicely. Here is the code snippet: <mat-card *ngFor="let s ...

htmlangularangular-material