Tips for preventing redundancy in html theme construction by using bootstrap classes only once

Question

Tips for preventing redundancy in html theme construction by using bootstrap classes only once

As I embark on creating an HTML theme, I have decided to incorporate Bootstrap 4.

One challenge I encountered was the need to repeat Bootstrap classes in various places, such as:

<div class="row border border-top-0 mt-2 p-2 bg-info">One</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">example 2</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">something</div>

This led me to wonder if it's possible to consolidate all these Bootstrap classes into a single custom name. For example:

myclass="row border border-top-0 mt-2 p-2 bg-info"

and then utilize this new class for elements like so:

<div class="myclass">One</div>
<div class="myclass">example 2</div>
<div class="myclass">something</div>

Please note that relying solely on copying and pasting is not recommended. If a new class needs to be added, it would require updating every instance individually.

html css bootstrap-4

Answer 1

Answer №1

If you haven't delved into all the BS4 documentation, there's a chance you could download the source code and manipulate it. However, I strongly advise against doing so.

It may not be clear why you're interested in this, but utilizing JavaScript is an option. You can define a string containing your preferred classes and apply them to the elements you desire or replace the current classes with them.

In this way, when you need to append another class to the list, just insert it within the declared string (myClass)

For example:

const myClass = 'row border margin-top'
document.querySelectorAll('.my-row').forEach(row => row.className += ` ${myClass}`)

div {
  height:100px;
  width:100px;
  margin:5px;
}

.border {
  background:red;
}

<div class="my-row"></div>
<div class="my-row"></div>
<div class="my-row"></div>

Option 2 . This is not recommended.

Instead of loading the URL of bs4, consider downloading the source files from Bootstrap and integrating them into your project.

Within these files, locate where they define the styles for each class and utilize SASS (bs4 is also written in Sass) to create your own custom class that builds upon the styles of the bs4 classes.

.myclass {
  @extend .row;
  @extend .border;
  @extend .mt-2;
  /* Add styles specific to myclass here */
}

Answer 2

If you haven't delved into all the BS4 documentation, there's a chance you could download the source code and manipulate it. However, I strongly advise against doing so.

It may not be clear why you're interested in this, but utilizing JavaScript is an option. You can define a string containing your preferred classes and apply them to the elements you desire or replace the current classes with them.

In this way, when you need to append another class to the list, just insert it within the declared string (myClass)

For example:

const myClass = 'row border margin-top'
document.querySelectorAll('.my-row').forEach(row => row.className += ` ${myClass}`)

div {
  height:100px;
  width:100px;
  margin:5px;
}

.border {
  background:red;
}

<div class="my-row"></div>
<div class="my-row"></div>
<div class="my-row"></div>

Option 2 . This is not recommended.

Instead of loading the URL of bs4, consider downloading the source files from Bootstrap and integrating them into your project.

Within these files, locate where they define the styles for each class and utilize SASS (bs4 is also written in Sass) to create your own custom class that builds upon the styles of the bs4 classes.

.myclass {
  @extend .row;
  @extend .border;
  @extend .mt-2;
  /* Add styles specific to myclass here */
}

Answer 3

Answer №2

Create your own custom CSS styles

Here's an example:

.custom-style { 
    border: 1px solid #333; 
    border-top: 0px; 
    margin-top: 5px; 
    padding: 3px; 
    background-color: #f9f9f9;
}

Answer 4

Create your own custom CSS styles

Here's an example:

.custom-style { 
    border: 1px solid #333; 
    border-top: 0px; 
    margin-top: 5px; 
    padding: 3px; 
    background-color: #f9f9f9;
}

Tips for preventing redundancy in html theme construction by using bootstrap classes only once

Answer №1

Answer №2

Similar questions

Achieving priority for style.php over style.css

The side button is not functioning properly on IE Edge

Issue with Bootstrap causing individual scroll panels for each column to be unresponsive

What causes a 404 error when a GET response is returned in a Node.js server?

Adjust vertical dimension using rich text editor tag

The jQuery selectors are not able to identify any dynamically generated HTML input elements

Height of columns in Bootstrap 4 grid layout using row-cols

Add extra space to the dimensions of the div by incorporating padding

Encountering a problem when trying to connect an array from the server to the HTML portion using AngularJS in combination with Asp

How to access an element inside a div using the eq() method

The pop-up orientation is not being adjusted according to my CSS when it changes

Creating a custom internal link with parameters using Twig

Validation of forms using Javascript

What is the best way to add a unique style to a third-party component within a React component without impacting the styles of other components?

RangeError: The React application has surpassed the maximum stack size limit, causing an error to be thrown

Using CSS3 or Javascript to create smooth page transition animations

Challenges with styling <input> elements and autofill functionality

How do I prevent the default submission behavior in an asp:ImageButton when the user presses the enter key in ASP.NET using C#?

Owl-themed Time Picker with Switched Button Orientation

What is the best way to ensure that all of my images are the same size?