Getting rid of breakpoints in Bootstrap 3

I recently inherited a web application that utilizes Bootstrap 3 as its framework with some basic customization applied through the recommended _custom-variables.scss method. The official SASS port is included as a dependency and imported into the app.scss file using @import "bootstrap"; after _custom-variables.scss and _custom-mixins.scss.

Due to the extensive data displayed, the fluid-width app is not suitable for small screens, so I aim to eliminate or deactivate the -xs- and -sm- breakpoints from the CSS. The layout will be optimized for -lg- and -md- breakpoints, with -md- being the narrowest breakpoint.

In the _custom-variables.scss file, I modified the width of $container-tablet from:

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

to:

// Small screen / tablet
$container-tablet:             (940px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

I also added a min-width: $container-md; to the parent<div> containing the entire layout.

This setup requires me to include classes for the unwanted breakpoints on my HTML elements. For instance, the following code maintains a column width of 25%:

<div class="col-xs-3 col-sm-3 col-md-3">

Omitting the smaller breakpoint classes removes the width property, causing the <div> to default to a width of 100% when the browser width falls below 992px (the min-width value of the -md- breakpoint).

My queries:

  1. Why is it necessary to specify additional smaller breakpoint classes on my containers? (I'm a bit rusty on my Bootstrap knowledge!)
  2. Is there a more efficient way to disable/remove the two smaller breakpoints?
csstwitter-bootstraptwitter-bootstrap-3sass

Answer №1

To ensure proper responsiveness, it is important to adjust the width of the container while also specifying smaller breakpoint classes.

Instead of solely changing the container width, consider modifying the actual breakpoints themselves:

@screen-md:                  1px;
@screen-md-min:              @screen-md;

In addition, remember to manually set the min-width for the container like this:

@media (min-width: 1px) {
  .container {
    width: 970px;
  }
}

CODEPEN

Answer №2

Instead of referencing each Bootstrap partial individually in my app.scss file, I decided to take a different approach similar to how you customize Bootstrap with your own variables for theming.

  1. To start, I duplicated the bootstrap/grid.scss file and renamed it as bootstrap/custom-grid.scss
  2. Next, I updated the reference in my app.scss file from bootstrap/grid.scss to bootstrap/custom-grid.scss
  3. Within the new bootstrap/custom-grid.scss file, I made some modifications by removing certain lines of code:

...

@media (min-width: $screen-sm-min) {
    width: $container-sm;
}

@include make-grid(xs);


@media (min-width: $screen-sm-min) {
    @include make-grid(sm);
}

@media (min-width: $screen-md-min) {
    @include make-grid(md);
}

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

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

javascriptjqueryhtmlcss

Achieving the position:fixed; effect with a scroll bar

I've designed a webpage with two columns: one on the left and one on the right. On the left side, there are all new orders displayed as HTML links. Upon clicking a link, the order details are fetched via an AJAX call and displayed on the right-hand s ...

htmlcssscrollfixed

In React, the input is consistently considered 'valid'

I have a React component that looks like this export const SearchBar = ({ searchInput, updateSearchKeyword, }: SearchBarProps) => { const dummy = ""; return ( <div className={`${styles.container} `}> <input c ...

cssreactjs

Position the object at the center of the window

Trying to navigate the complex world of web development and facing a challenge that seems simple, yet tricky. Not quite sure how to properly refer to elements using HTML, Javascript and CSS. In my HTML page, I have used divs as clickable objects styled wi ...

javascripthtmlcss

Example of converting PSD design to HTML slicing

Although I am not well-versed in the art of converting PSD to HTML, I am curious to hear from those who are experts in this area. My concern is that when I encounter these types of designs, I immediately think about the large size images (both in terms of ...

htmlcssweb-slice

How come the element is not appearing in the div even though it should be there?

The placement of the image and select menu within the same div element may be causing a display issue where only the first image is shown correctly and the select menu appears outside. Why does this occur? <body> <div style="height: 1080px; ...

htmlcssbootstrap-4

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

htmlcss

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

Ways to disable mousewheel function in jQuery

I am trying to deactivate the mouse scroll in jQuery and successfully did so, however, I encountered this error message jquery.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See Thi ...

javascripthtmljquerycssmousewheel

Is it possible to toggle CSS classes worldwide?

One of my CSS techniques involves outlining every div in red, which is helpful for debugging alignment of elements. In my app, I have a button that currently toggles various debugging features. I'm interested in incorporating the toggling of these re ...

cssangularsassbootstrap-4

the contents exceed the boundaries

As I work on creating a page to display a list of books, I am facing an issue where the content sometimes overflows out of the book-info box. This usually happens when a book's title is excessively long and goes beyond the set height of 140px. I am se ...

htmlcsscss-float

Incorrect width of JQuery Accordion

I am facing an issue using a table with JQuery UI Accordion where both the header and contents should have 3 columns of fixed width. Strangely, the first column in the contents is not following the CSS rules while the header appears to be fine. Here is a l ...

jqueryhtmlcssjquery-uijquery-ui-accordion

Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence. ...

htmlcssfontsbootstrap-4

I'm working on using CSS to design a layout similar to the one shown in the image below, experimenting with flexbox to achieve the

https://i.sstatic.net/4kNAd.png I am currently facing an issue with the layout of my navigation bar, as it is displaying in a column instead of a row like the format shown in the image. I have tried using flexbox and setting the display to inline-block in ...

htmlcssflexbox

Utilizing CSS to Properly Position FontAwesome Icons

Within my h1, I have incorporated 2 FontAwesome quote icons. To adjust their positioning, I utilized CSS due to the lack of a simpler method. However, I am facing challenges with responsiveness on various screen sizes, leading me to resort to media queries ...

csstwitter-bootstrap

Show links in the sidebar menu when the primary navigation links are hovered over

I am trying to create a dynamic side menu that displays different links depending on which link is hovered over in the top navigation bar. Here is what I have so far: HTML: <ul class="nav navbar-nav"> <li class="nav"><a class="toggle" hr ...

javascriptjqueryhtmlcss

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4

Ensure consistent alignment of the Bootstrap pagination control

I have created a bootstrap pager using the code below. <style> .navigation-bar .pagination { margin-top: 0; } </style> <div class="navigation-bar"> <span class="pull-left"><strong>Total record(s) 1000</strong></s ...

htmlcsstwitter-bootstrap

The responsiveness of CSS isn't functioning as expected

Struggling to achieve responsiveness on my page, facing issues with a white border at the top and image fitting problems. Any insights on what might be causing this? CSS: .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; hei ...

htmlcss

Tips for creating responsive images in a Bootstrap template

I have done my research and tried numerous solutions, but I still can't get two images and a text to display in one line. The problem is when I shrink the window size, the images end up above and below the text instead of beside it. I have included th ...

htmlcssimagetwitter-bootstrap