Designing a unique 24-column grid system for Bootstrap 4

I'm working on a project and looking to incorporate some bootstrap elements into my HTML files for UI development. My goal is to modify the standard grid size from 12 to 24. I've read through the documentation, but I'm unsure of where exactly to implement these changes.

Here's an excerpt from the Bootstrap documentation:

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

Could someone please advise me on where in my code I should place this information?

CSS file
HTML file
Js file
....
htmlcsstwitter-bootstrapsassbootstrap-4

Answer №1

$grid-columns is a SASS variable that can be utilized to adjust the grid layout to 24 columns as shown below:

$grid-columns:           24;
$grid-gutter-width-base: 15px;

@import "bootstrap";

To see a live demonstration, visit:

The names of the variables have been slightly modified in Bootstrap 4.0.0:

$grid-columns:      24;
$grid-gutter-width: 12px;

@import "bootstrap";

For additional information, check out: How to achieve a bootstrap 4 24-column grid system

If you want to customize Bootstrap 4, consider using the Bootstrap 4 Customizer tool

Answer №2

Customized 24-column Grid System with Various Gutter Options
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

Different Configurations for a 24-column Grid System
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px

Answer №3

If you want to customize Bootstrap's styles, you can do so by adding your own stylesheet inside 'application.scss' with custom variables to override the default settings:

// application.scss

@import "variables"; // Add custom vars here

@import "bootstrap/variables";

@import "bootstrap/main"; 


// _variables.scss

%scope {
  @import "boostrap/variables";

  @gridColumns: 24
  @gridColumnWidth: 30px
  @gridGutterWidth: 1px
  @gridColumnWidth1200: 35px
  @gridGutterWidth1200: 15px
  @gridColumnWidth768: 21px
  @gridGutterWidth768: 10px
}

For more information on this topic, check out this answer:

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

html pagination on website

I am currently displaying my products in rows, however the code I'm using is presenting them in columns instead. I have implemented a datatable pagination feature, but I'm struggling to understand how to properly use it on my website. Can someone ...

phphtmldatatable

What is the process for retrieving the value of a text box using V-Model?

Link to the code snippet <td><input class="input" v-model="user.name" /></td> After accessing the provided link, I noticed a unique input textbox. Is there a way to extract specific text values like a,b,c from this te ...

javascripthtmlvue.js

Show the appropriate tooltip message based on the circle that I hover over

I have a collection of 5 clickable circles, each with a unique ID and its own tooltip text that is sourced from an xml Data Interface. jQuery(function ($) { $.ajax({ type: "GET", url: 'steel_agg_bof_flash_en.xml', ...

javascriptjqueryhtmlcss

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Showcase an image stored in my sqlite3 database on my Python Flask web application

My goal is to create a web application connected to a database where users can search for specific names and display the corresponding image stored in the database. The images in the database are stored as png BLOBs. The database is structured with a tabl ...

pythonhtmlsqliteflask

Is it possible to make an image gradually appear and disappear?

Is there a way to create a continuous fade in and out effect for an image, transitioning between 40% and 100% opacity? I attempted using a CSS3 opacity property, but it only allows for 0% and 100%, causing the fade effect to be ineffective. Does anyone h ...

jqueryhtmlcss

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

Having trouble with jQuery div height expansion not functioning properly?

Having a bit of trouble with my jQuery. Trying to make a div element expand in height but can't seem to get it right. Here's the script I'm using: <script> $('.button').click(function(){ $('#footer_container').anim ...

javascriptjqueryhtmljquery-animate

Guide on replacing the character "&" in PHP with ease

I am encountering an issue where some output on the page contains a space character written as "&nbsp;". I need to replace it back with a regular space. I attempted using str_replace("&nbsp"," ",$mystr) and even preg_replace("/(&nbsp;)/", " ", ...

phphtmlregex

What's the best way to ensure my side navigation floats on top of my full-width slider?

I am currently working on implementing my side navigation to overlay on top of my full-width slider at the beginning of the webpage. However, when I add the slider, the navigation buttons in my side nav become unclickable. I have tried using the z-index ...

javascriptcsshtmltwitter-bootstrap

What is the method for including a hyperlink in an swf document?

I've been working with HTML and trying to embed links in my webpages that are in offline mode. After doing some research, I came across the following code snippet: MyClickTagButton.addEventListener( MouseEvent.CLICK, function():void { if (roo ...

htmlcssactionscript-3flash

Using Javascript's Speech Recognition to activate a button

I am new to using JavaScript Speech Recognition and decided to work with the Annyang library. My goal is to automatically trigger the "show date" button when the user says 'hello', without actually clicking the button. However, I've been fac ...

javascripthtmlonclickspeech-recognitionannyang

Blueprint adjusts the height of the menu

After rendering the following code, the menu appears as a table with the ID topMainMenu and a height of 51. However, upon removing the Blueprint stylesheet, the height of topMainMenu reduces to 20, which I believe is the minimum height. <head runat="se ...

asp.netcssblueprint-css

What steps do I need to take to design a menu?

I need assistance in organizing my menu with submenus. The code I currently have successfully retrieves all the submenus, but I would like to categorize them accordingly: For instance: Main Menu - Submenu 1, Submenu 2, Submenu 3 How can I go about categ ...

phphtmlcss

Spinning around the Y-axis only causes a one-sided flip

Is there a method to ascertain the direction of rotation for the CSS property transform: rotateY? I have been attempting to spin this h1 element from one side to the other, but regardless of using a positive or negative sign, it always rotates in the same ...

htmlcssanimationtransform

Utilizing JavaScript Fetch with User Input to Integrate OpenWeather API Retains Previous Data on HTML Page

I have been working with JavaScript Fetch to retrieve data from the OpenWeather API. In my project, I have created a form where users can input the name of a city to view its weather information. However, I am facing an issue where the data from the previo ...

javascripthtmljsonfetchopenweathermap

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

Show the updated count retrieved from a specific record in a database table using Ajax technology

I am looking to retrieve the latest ID from a database table and then increase it by 1. I want to display this incremented value in either an Input or Label element of HTML, instead of using tables as most tutorials do. Below is a snippet of my code: inde ...

c#htmlajaxasp.net-mvc-5controller

Reloading the webpage while simultaneously shutting down the modal popup with jQuery

My Issue : One of my challenges involves a modal form that appears when I click on a submit button. This form allows users to input information and request a demo from an organization. The data entered into the form is then stored in a MySQL database usin ...

jquerytwitter-bootstrap

"Enhance User Experience: Use CSS to highlight text selection based on

As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text t ...

jqueryhtmlcss