I am looking to incorporate additional responsive breakpoints into the CSS of Bootstrap 4.1

The breakpoints in bootstrap 4.1 are as follows: 

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

I am trying to add a new breakpoint at

@media (min-width: 1600px) { ... }

However, the CSS is not working for 1600px and is instead taking styles from the 1200px breakpoint. Can anyone assist me with this issue?

cssbootstrap-4media-queries

Answer №1

Why not create your own unique custom bootstrap theme by creating a file called custombootstratheme.sass and adding something like the following:

// Overriding sass variables:

$grid-breakpoints: (
  xs: 0,
  my: 300px, // !!!!!!!!!!!!!
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
@import "./../node_modules/bootstrap/scss/functions";
@import "./../node_modules/bootstrap/scss/variables";
@import "./../node_modules/bootstrap/scss/mixins";

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L187-L193

After compiling your sass, you will have access to your own versions of col-my-6, mt-my-1, and other Bootstrap components tailored for your needs.

Answer №2

Have you considered adding both min-width and max-width attributes like this?

@media  only screen and (min-width:1200px) and (max-width:1600px) {
   div#zarada p {width:39% }
   }

You could potentially set a smaller size in between as well, while also ensuring the correct order of size settings.

For further information and an expanded example, please visit: media screen and max width

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

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

htmlcss

Expanding the Bootstrap 5 accordion causes it to extend beyond the designated width

My initial expectation was for the accordion component to expand to match its parent's width. However, upon expansion, it not only enlarges itself but also causes the parent element to compress significantly. What steps should be taken to achieve the ...

htmlcssbootstrap-5

The function is defined, but it cannot be set to null

Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even t ...

javascripthtmlcss

The menu bar fails to maintain its responsiveness once the breakpoint is reached

The issue I am facing is that the menu bar does not resize properly when the browser window size is less than 900px. This results in the bar being too wide, some content going off the screen, and a horizontal scrollbar appearing. I have been trying to tro ...

jquerycssdrop-down-menuresponsive-designnavigation

Ways to remove border when image is not present

I've been attempting to use JavaScript to hide the border, but it doesn't seem to be working. Is it possible to hide the border in HTML using Java? ......................... Check out my page here Here is a snippet of my HTML: <!-- Single P ...

htmlcss

The mui table does not adjust to different screen sizes

Currently, I am using the Material-UI table, but it is not responsive. I am looking to set the width in percentages for better adaptability. Below are screenshots from two different screens showcasing the output: https://i.sstatic.net/lxA3u.png https:// ...

reactjsbootstrap-4material-ui

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

Optimal-minimal behavior with a versatile CSS grid system

Currently, the use of grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); Results in this behavior: If there are more items than can fit in a row (based on the minimum), new rows are created. If there are fewer items than the row could accommodat ...

htmlcsscss-grid

Can Vue.js import both element-ui and Bootstrap components?

After importing element-ui components, I realized that I also need some common styles such as reset.css and others from Bootstrap. I am wondering if these two can coexist in the same project without causing conflicts? ...

twitter-bootstrapvue.jsvuejs2vue-componentbootstrap-4

Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12. To address this problem, I have taken the following steps: Ensur ...

htmlcssruby-on-railssass

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

cssvue.jslessvue-component

What is the best way to align my cards side by side using html/css/js?

Check out this piece of HTML code I have: <div class="container"> <div class="column"> <div class="post-module"> <!-- Inserting content here --> </div> <div class="post ...

htmljquerycsswebdesign-patterns

Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red. I have tried various methods to update the background color upon selection ...

javascriptcssreactjsreact-table

Use the angular cli to incorporate the CSS styles found in the node_modules directory

After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...

cssangularjsnode.jsvendorangular-cli

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

Does anyone know why my CSS3 pseudo elements are working fine in Chrome, but reverting back to default styling in Firefox for my radio button? Any suggestions? Check out this JSFIDDLE link for reference: JSFIDDLE Here is the HTML code snippet: <input ...

htmlcssfirefoxradio-button

Applying box-shadow to tables and collapsing borders with border-collapse property in IE!

The box-shadow property does not function properly in Internet Explorer when the table has a border-collapse: collapse style applied to it. ...

css

Did Chrome just generate a mysterious CSS code snippet on its own?

In my micro page, I have intentionally avoided using any external references, including a favicon.ico file. Instead, I have opted to use base64 inline images. The only CSS in use is inline within a <div> element. Interestingly, the following code doe ...

csshtmlgoogle-chromedom