Tips for compiling Bootstrap SCSS to specifically include only the extended classes

Is there a way to compile my custom bootstrap SCSS file into a CSS file that only includes the classes I created in my custom file?

For example, I want to eliminate the extra CSS classes added to my HTML code.

Instead of including unnecessary classes like:

<h4 class="border-bottom p-2 mb-4">
    Blah Blah
    <span class="badge badge-secondary badge-pill float-right">100</span>
</h4>

I would prefer to write (without any class attributes):

<h4>
    Blah Blah
    <span>100</span>
</h4>

To achieve this, I have created a custom.scss file with specific content:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities/borders";
@import "bootstrap/scss/utilities/spacing";
@import "bootstrap/scss/utilities/float";
@import "bootstrap/scss/badge";

h4 {
    @extend .border-bottom;
    @extend .p-2;
    @extend .mb-4;
}

h4 span {
    @extend .float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

After compiling, the CSS file contains over 1000 lines. Why is this happening? How can I remove all the unnecessary styles and only keep what I specified in my custom.scss file?

The desired result should be something like this:

h4 {
  border-bottom: 1px solid #dee2e6 !important;
  margin-bottom: 1.5rem !important;
  padding: 0.5rem !important;
}

h4 span {
  float: right !important;
  // Other specific styles here
}

But it's not turning out that way.

Edit:

If I modify my custom.scss as follows:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

$theme-colors: (
    "secondary":  $secondary,
);

h4 {
    border-bottom: $border-width solid $border-color;
    padding: map_get($spacers, 2);
    margin-bottom: map_get($spacers, 4);
}

@import "bootstrap/scss/badge";

h4 span {
    @include float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

The resulting CSS will mostly include the necessary styles. However, I originally anticipated it would be easier to rely on bootstrap classes rather than manually searching through the SCSS files. Is there a simpler way to accomplish this?

csssassbootstrap-4mixins

Answer №1

Your code is functional, however you are extending classes rather than using placeholders. This is a significant distinction.

For instance, when extending classes in your scenario:

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

h4{
  @extend .border-bottom;
}

The outcome combines CSS rules for both the .border-bottom class and the h4 element:

.border-bottom, h4 {
  border-bottom: 1px solid #dee2e6 !important;
}

In contrast, with placeholders:

%border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

h4{
  @extend %border-bottom;
}

This results in the desired behavior:

h4 {
  border-bottom: 1px solid #dee2e6 !important;
}

An informative article explaining this difference can be found here:

When importing Bootstrap4 files, Sass generates numerous .class rules (often resulting in over 1000 lines of code) that are then extended in your stylesheets.

For example, if you write:

h4 {
    @include float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

You will get:

h4 {
  float: right !important; /* your @include */
}

As well as additional rules like:

.badge-secondary, h4 {...}

.badge-pill, h4 {...}

.btn .badge, .btn h4 {...}

.badge:empty, h4:empty {...}

.badge-secondary[href]:hover, h4[href]:hover, .badge-secondary[href]:focus, h4[href]:focus {...}

.badge, h4 {...}

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

Guide to positioning elements in CSS to maintain a fixed location

While creating a Back To Top button, I set it to a fixed position using the position:fixed; property and also background-attachment:fixed;, but I'm still facing issues with its position changing when new data is inputted. <html> <head> &l ...

htmlcss

Troubleshooting a dysfunctional collapsed navbar in React with Bootstrap 5

I am experiencing an issue where the collapsed navbar icon does not expand when clicked on smaller screens. I followed the example provided by bootstrap 5 and made sure to include bootstrap css/js and jquery. class CustomNavBar extends Component { re ...

javascripthtmlcssreactjsbootstrap-5

CSS: Floating navigation bar that becomes fixed upon reaching the top of the page

Looking for a creative approach to achieve the following: An innovative navigation bar that initially appears on a page regularly but then becomes fixed at the top as I scroll down. An alternative perspective: imagine a navigation bar that starts off unf ...

csstwitter-bootstrapnavbar

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

javascriptjqueryhtmlcssloops

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

javascriptjqueryhtmlcss

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

javascripthtmlcssreactjsmaterial-ui

Label for the checkbox is covering other content on the screen in 1024 x 768

Here is the JSP code snippet: <h:field path="configuredChannels" required="true" code="admin.menu.channels"> <div class="row-fluid" data-channel-checkboxes="#"> <form:checkboxes element="div class=&apos ...

htmlcss

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: ...

javascripthtmlcssevents

Issues with Google fonts not displaying properly on WordPress site

I'm just starting out with Wordpress and I'm using the html5blank theme to bring in my stylesheets. However, I've run into an issue where the google fonts are not being applied on my wordpress site. In my header.php file, I have included th ...

phpcsswordpresshtml

Center text vertically in a textarea

Is it feasible to vertically center the content of a <textarea> within a multi-line search box while keeping everything aligned in the middle? ...

htmlcss

Using only HTML and CSS, part of the text should transition in a Carousel without the use of JavaScript or jQuery

Looking to create a Carousel with changing text at a fixed interval, focusing on topics like mobile IoT application development and transport products. Currently utilizing the Aurelia framework. $('#carouselExampleSlidesOnly').carousel({ int ...

jqueryhtmlcsscarouselaurelia

Next JS and the power of media queries

I've been searching for a while now, but I just can't seem to find a solution to my problem. I'm attempting to utilize different files for my media query breakpoints in Next JS, but they don't appear to be working. I created the files ...

cssnext.jsresponsive

Automatically expand a child node in the tree menu

Hey there! I've got a tree menu that I'm working with. I'm looking to have a specific node in the tree menu automatically open by default. Essentially, I want a particular node to be open when the page is refreshed. For instance, in this e ...

htmlcssmenu

To ensure the clicked button remains active, I utilize Bootstrap for seamless implementation

I have exhausted all possible methods to override the issue, including tweaking the CSS, but nothing seems to be working. I am currently utilizing bootstrap 5 for this project. document.addEventListener("DOMContentLoaded", function() { const notesButt ...

htmlcssbootstrap-5

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

csssasswebpacksass-loadercss-loader

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

cssreactjstailwind-css

Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful. The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time i ...

cssbootstrap-5

Do not include scrollbar measurements when using percentages?

Scenario: Consider the elements parent, child1, and child2 child2 has its height and overflow properties set so that its content displays with a vertical scrollbar Both child1 and child2 contain child elements with percentage-based width values Observati ...

htmlcsswidthscrollbar

What is the method for deleting a phone number hyperlink on an iPhone?

I am encountering an issue with my mobile site, specifically with a Span element containing a phone number. <span class="order1-button">999-120-9191</span> The problem is that when I access the page on my iPhone, the phone number is automatic ...

htmlcssiphone