Enhance Bootstrap by incorporating XXXL sizes

After watching a tutorial on customizing Bootstrap code and reading a post about adding XXL & XXXL breakpoints, I encountered an issue with Google Chrome and Firefox not recognizing these new breakpoints.

https://i.sstatic.net/KHyh1.png

main.scss https://i.sstatic.net/5breL.png

  $grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1600px
  );

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1380px,
    xxxl: 1560px
);

@import "node_modules/bootstrap/scss/bootstrap";

main.css

The main.css file is quite lengthy at 9438 lines, so I have shared it here - .

htmlcssbootstrap-4sass

Answer №1

After incorporating all the Bootstrap CSS code into main.css, there was no longer a need to include the default Bootstrap CSS Style sheet.

<!-- Bootstrap CSS - No longer necessary -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

However, upon inspecting Elements, it came to my attention that I had linked to the incorrect main.css file.

The link led to this one.

<link rel="stylesheet" type="text/css" href="{% static "main.css" %}">

https://i.sstatic.net/42Uql.png

Instead, I had transferred the Bootstrap code to this one

https://i.sstatic.net/AOAtk.png

To avoid any interference with main.css in blog/static, I created a separate main1.css within blog/static.

In the terminal, I executed 

C:\Users\ACER\Documents\Django Projects\EcommerceProject>scss main.scss blog/static/main1.css

Prior to this, I was running 

C:\Users\ACER\Documents\Django Projects\EcommerceProject>scss main.scss main.css

From then on, whenever I needed to utilize Bootstrap code, I would reference this Stylesheet

<link rel="stylesheet" type="text/css" href="{% static "main1.css" %}">

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

Utilizing a Clear Button to Reset Specific Fields in a Form Without Clearing the Entire Form

I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...

javascripthtmljqueryforms

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

htmlcss

Guide to wrapping a container around an inline element using inline pseudoelements, all without relying on absolute positioning

I need a way to group my inline elements together in a container so that I can control their placement and add a background color. My issue is with two inline block elements, where the inner one has two pseudo elements that are also inline. When I try to ...

css

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

I need to blur multiple elements on my website when I hover over them, leaving only the hovered element in focus. Is there a more efficient way to achieve this? Currently, I have the following code: $(function() { $('#a').hover(function() { ...

javascriptjqueryhtmlhoveraddclass

Fix the issue of the screen bouncing around when the scroll bar is visible

When my modal popup appears on screen, I am using the CSS property overflow: hidden to eliminate the scrollbar. To ensure that the screen does not shift when the scrollbar disappears, I am calculating the scrollbar width using JavaScript and adding paddin ...

cssreactjs

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?

<div class="col-xs-3"></div> <div class="col-xs-6 col-sm-6 col-md-6" style="min-width: 320px;"> </div> OR <div class="col-xs-6 col-md-offset-3 col-sm-offset-3 " style="min-width: 320px;">` </div> I would like to remo ...

cssbootstrap-4

The process for changing the textContent to X when an image is clicked

How can I create a function that changes the text content to 'X' when an image is clicked? I already have a function that updates the title based on the image dataset, but combining the two functions has been unsuccessful. Can someone help me con ...

javascripthtml

Adjust the size of fonts for elements that are added dynamically

My goal is to dynamically add elements with decreasing font sizes to a fixed-width/height container until they no longer fit. I've managed to scale the font based on the browser window size, but that's not the intended solution. Is it possible t ...

javascriptjquerycss

What is the method to assign a value of 0 to an unchecked checkbox and a value of 1 to a

I am working on a basic registration form that includes a checkbox asking users to acknowledge if they have read the terms and conditions. However, when I check the console log for the checkbox value, it does not change based on whether it is checked or no ...

javascripthtmlinputcheckbox

Guide on how to display an HTML file in Vue JS that is received from the server

I'm brand new to Vue JS and currently grappling with how to display an HTML page sent by the server. For example, let's say I have a Node router named "health" that sends an HTML file like this: res.sendFile('test.html', { root: path.d ...

javascripthtmlvue.jsvuejs2fetch

bootstrap accordion animation

#accordion { .card { border: unset !important; .card-header { @extend .text-xx-large; background-color: $white; padding: ($spacer * 3.44) 0px ($spacer * 3.44) 0px; } } } .card-header { h5 { a{ color: $d ...

jquerycssbootstrap-4

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

Encountered an error: $(...).DataTable is not recognized when attempting to call three separate tables on the same page with auto refresh enabled

Hello, I am new to using scripts and I am attempting to load three different tables onto my webpage, all populated from a MySQL database. Additionally, I want all three tables to automatically refresh when new data is inserted or changed. I have successful ...

javascriptphpjqueryhtmldatatables

What is the best way to adjust text to a specific width on an HTML canvas?

Is there a way to adjust the width of a single-line text string precisely on an HTML5 canvas? My current method involves initially setting a font size, measuring the text's width using measureText(my_text).width, and then determining a new font size b ...

htmltexthtml5-canvasmeasurement

Tips for creating vertical text in HTML similar to a banner

I am looking to display text vertically in a way that each letter appears below the other. Desired Result: H E L L O I'm unable to utilize the rotate property and I prefer not to make changes to my HTML code. Is there a better solution for achi ...

htmlcss

troubleshoot issues with function causing options to not render

I am currently working on displaying values of select options dynamically in PHP. The user creates these options, which are then stored in the database, and I am attempting to retrieve them from a different location. To achieve this, I have implemented the ...

phphtmlmysql

Firefox struggles to properly position tables that exceed a width of 767 pixels when using Bootstrap

I have designed a basic website featuring a Bootstrap navbar with tabs. Each tab displays a table. You can view the layout here. Everything functions correctly in Chrome 45 and IE 11 on Windows 8.1. However, when using Firefox, the tables are positioned ...

cssfirefoxtwitter-bootstrap-3

The parent container fails to adjust its size to fit the child div

While browsing through various questions, I noticed that none of them mentioned the position:absolute property (which may be the missing piece). I have always been comfortable working with tables, but in my first attempt with divs, I encountered an issue. ...

csshtml

Aligning elements in the middle of a div, from side to side

If you imagine a container div that is 100px wide, and inside it there are 3 smaller divs each 20px wide. I am wondering how to align these smaller divs so that they are centered within the container div, with a 20px gap on each side? ...

htmlcssalignment

Tips on positioning a secondary navbar below a sticky navbar in Bootstrap 4

Currently, I am utilizing bootstrap 4 to create an application that features two navbars. Both of these navbars are intended to be fixed at the top, with the second navbar hiding as the user scrolls down. Here is the HTML code for the navbars: Navbar 1: ...

htmlcsstwitter-bootstrapbootstrap-4navbar