Adjustments to make for custom span and gutter width in Bootstrap's values

Looking to design a fixed layout with Bootstrap? Want to set span3 to 278px and gutter width to 12px for a total width of around 1142px? I tried the Customize tool on the Bootstrap site, but didn't get the desired result. Any advice on the correct values for the following?

@gridColumns = ?
@gridColumnWidth = ?
@gridGutterWidth = ?
@gridColumnWidth1200 = ?
@gridGutterWidth1200 = ?
@gridColumnWidth768 = ?
@gridGutterWidth768 = ?

Referenced this post on Stack Overflow for guidance, but still struggling to figure it out.

csstwitter-bootstrapless

Answer №1

@totalColumns =  12
@columnWidth = 92
@gutterWidth  = 12

That would be your initial setup, however

@columnWidth1200 = ?
@gutterWidth1200 = ?
@columnWidth768 = ?
@gutterWidth768 = ?

These variables are utilized to create a wider layout for larger or smaller screens compared to the standard, so adjustments must be made to accommodate this change.

If required, redesign the layout for the specific screen size and update the span3 calculation: spanX / X = @columnWidth.

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

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

htmlcss

Use of number type input on mobile devices in HTML

My goal is to display the up/down arrows alongside an input element with type="number" in Chrome on Android. I've adjusted the CSS to set opacity=1, but unfortunately, they are not appearing. On desktop, however, they show up without any iss ...

htmlcssinput

Experience the ultimate in slider automation with the cutting-edge power of

Here is an example of a website plugin I used on my site. You can check it out by clicking here. However, I'm having trouble automating the events that occur when the item slider is clicked. I would like to make these events happen automatically with ...

jqueryhtmlcss

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

javascriptjqueryhtmlcss

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

javascripthtmlcssangularangular2-template

How can I eliminate padding from events in FullCalendar's timeGrid view?

Is there a way to remove the padding from an event when the calendar is in 'timegridview'? Users are taking advantage of the empty space created, allowing them to bypass a blocked time slot. I currently have it set so that clicking on an event d ...

htmlcssfullcalendar

reveal or conceal content on hover of mouse pointer

I am currently working on a section that functions like jQuery tabs, but instead of requiring a click to activate, I want it to work on mouse hover. The current implementation is somewhat buggy - when hovering over a specific section, it displays as expe ...

jquerycsstabs

Sometimes the bag Bootstrap Tooltip will persist on the page

I'm currently using a bootstrap framework for a project and running into an issue with the tooltip plugin. I have two div tags: <div class='Tracked StarInDisplay' title='Прибор отслеживается' rel='toolti ...

ajaxtwitter-bootstrap

Move the object beyond the boundaries of the container that can be scrolled

I'm having an issue where the "item" is draggable, but once I try to move it outside of the scrollable container, it disappears. I've attempted adjusting the z-index, but it doesn't seem to be resolving the problem. Any suggestions on what m ...

jqueryhtmlcssjquery-ui

Creating a sleek horizontal drop-down navigation menu using Bootstrap 5 and CSS

Attempting to design a horizontal dropdown menu for small screens has been a challenge. However, all the resources I've come across seem to be outdated and ineffective. ...

javascripthtmlcssbootstrap-5

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

cssreactjsmaterial-ui

Is there a way to determine if a table cell contains overflowing text compared to another cell?

https://i.sstatic.net/IYafA.png Is there a way to detect if the content of the fourth td overflows from the second td? I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing. What approach ca ...

javascriptjqueryhtmlcss

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

javascriptcssajaxhtmltwitter-bootstrap

How can I adjust the height of the carousel slider to fit the course section perfectly?

I am currently working on a new website that includes a carousel slider in one of its sections. I am trying to figure out how to make the slider fit within that section while still maintaining responsiveness. Any suggestions on how to achieve this? I am u ...

jqueryhtmlcssbootstrap-4slider

Automatically scrolling a div to the bottom in a React component

I am currently working on developing a chat application for my school project, and I would like to implement the feature that automatically scrolls to the bottom of the chat window. Despite trying various solutions and encountering React errors, I have not ...

javascripthtmlcssreactjsscroll

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

javascriptjquerycssresponsive-designpanel

Troubleshooting: Issues with React Material-UI breakpoints not functioning

Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul: ...

cssreactjsmaterial-ui

Struggles with closing dropdown menus

How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a ...

jquerycss

How to programmatically clear an input field in Angular using Bootstrap's typeahead feature

My current setup involves utilizing a form to populate a list displayed alongside the form. The markup looks like: <form name="stateForm"> <input type="text" ng-model="model.name" typeahead="state for state in states | filter:$viewValue"> ...

javascripttwitter-bootstrapangularjsbootstrap-typeahead

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax