How can I make Bootstrap fit my Custom Grid?

I have received specific measurements from a customer for a customized grid layout, and I am unsure of how to implement it. Here are the measurements provided:

**Width: 320px** 
Sides: (26px) (2 sides)
Column:  (52px) (4 columns)
Gutter:  (20px) (3 gutters)

**Width: 768px**
Sides: (76px)  (2 sides)
Column:  (33px) (12 columns)
Gutter:  (20px) (11 gutters)

**Width: 1024px** 
Sides: (72px)  (2 sides)
Column:  (55px) (12 columns)
Gutter:  (20px) (11 gutters)

**Width: 1280px**
Sides: (74px)  (2 sides)
Column:  (76px) (12 columns)
Gutter:  (20px) (11 gutters)

After some research, I discovered that Bootstrap 4 allows for customization of its grid system:

I noticed that it is possible to customize the gutter width:

$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
)

And also the container widths based on breakpoints:

$grid-breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

However, I could not find a way to customize the number of columns. Any suggestions on how to achieve this?

htmlcssbootstrap-4

Answer №1

To adjust the number of columns in Bootstrap, you can modify the value of $grid-columns. However, sticking with the default value of $grid-columns: 12 is perfectly fine.

For instance, if you keep the default value of $grid-columns: 12, you can achieve 4 columns on smaller screens by using col-3 four times. This setup still maintains 3 "gutters" between each column. On larger screens, you can utilize .col-md-1 12 times to have a total of 12 columns. This method aligns with Bootstrap's grid system.

In Bootstrap, it's not feasible to assign different numbers of columns for various screen sizes simultaneously. For example, you cannot make both .col-3 (up to 3 columns) and .col-md-12 (up to 12 columns) occupy the entire row width at once.

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

Include a horizontal line divider between each row of items that wrap to the next line

I am utilizing CSS flexbox to arrange a variable number of items in rows, wrapping around to additional rows as necessary. My query is, can a horizontal line be inserted between each of the rows? Here you can find a basic example of what I am working on. ...

htmlcssflexbox

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

javascripthtmlchartsbar-chartcanvasjs

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

I have a program that calculates the total price of products based on a specified quantity and updates an HTML table with these values. To demonstrate this, I am constantly taking input using an infinite loop. <!DOCTYPE html> <html> ...

javascripthtml

Extracting the id of an element using jQuery

The desired outcome is for the code to print the id of the selected div, but it's not working as expected. I've reviewed it multiple times but couldn't pinpoint the error. Any assistance would be greatly appreciated. Here is the HTML: < ...

javascriptjqueryhtml

TinyMCE editor does not appreciate being shifted from place to place

While working on my webpage, I encountered an issue with TinyMCE editors when trying to move them within the DOM tree. Strangely, the editor clears itself completely and becomes unusable. This problem seems to be consistent in Safari 4 and Firefox 3.6, but ...

htmldomtinymce

Comparison between using jQuery to append and execute a <script> tag versus using vanilla JavaScript

As I enhance my application, I've made the decision to embrace Bootstrap 5, which no longer relies on jQuery. Consequently, I am working to eliminate this dependency from my application entirely. One of the changes I'm making is rewriting the Ja ...

javascripthtmljquerybootstrap-5

Ensure the item chosen is displayed on a single line, not two

I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...

javascriptcssreactjsmaterial-uijss

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

javascripthtmlangularjs

Can the information from a form be automatically submitted to the server upon selection?

<div class="modal-body modal-body-step-2"> <form action="prenotazioni.php" method="post"> <div class="input-group"> <input type="radio" name="spettacolo" value="Lo Schiaccianoci">Lo Schiaccianoci<br> ...

htmlajaxforms

What is the procedure for extracting data from a JSON file within an HTML document?

Hey there, I am currently working on reading data from a json file using ajax. I have created a Video object that consists of Courses objects with titles and URLs. However, when attempting to read the title and URL of HTML as an example, I am not seeing a ...

javascripthtmljsonajax

What causes the slowness of onsubmit=" " function?

Initially, I had the following setup: HTML: <form onsubmit="return validate()"> ... <input type="submit" id="submit-button"/> </form> JS: function validate() { // Extensive validation process with regex and more... $(& ...

javascriptjqueryhtmlvalidation

Align the present domain using XPath

Is there a way, possibly with a newer version of XPath, to make the following code work: //a/@href[not contains("DOMAIN OF THE CURRENT PAGE")] The DOMAIN OF THE CURRENT PAGE should function as a variable that retrieves the domain - similar to something l ...

htmlxmlxpathweb-scraping

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...

c#asp.netcssgridviewscroll

How can I create a tickable image grid in Nativescript Angular?

My goal is to create an image grid in a Nativescript Angular App where users can select images and then move to the next page with the selected image IDs or names. I have successfully created the image grid, but I am struggling to make the images tickable ...

htmlangularnativescript

Using Bootstrap classes within a specified class declaration

Can you nest style classes within a single class? For example: .my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg} ...

css

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

I have a challenge with creating toggle buttons that require specific functions: 1) Display content on the first click (this is working) 2) Conceal content when another button is clicked (this is also working) 3) Hide content on the second click (this i ...

javascriptjqueryhtmlcss

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

htmlcssfirefoxoverflow

Setting a custom background image in a Bootstrap modal

When users visit my website, I want to enhance their experience by using a background image in my bootstrap modal. Despite several attempts, I have been unable to successfully set a background image in the modal. Can anyone provide guidance on this matter? ...

javascripthtmlcsstwitter-bootstrap

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

JQuery form not triggering the submit event

Currently, I am facing some issues with my code while trying to trigger on submit event on a form and validate it. The main problems I encountered are that the onsubmit event is not being triggered, and the input field of type email is not validated proper ...

javascriptjqueryhtmlbootstrap-modal