You are unable to apply multiple customizations to Bootstrap in a React application

I'm currently working on a React application that consists of two distinct sections, referred to as Part A and Part B.

Each part requires its own set of SCSS rules and Bootstrap Grid System Customization. Specifically, I need Part A to have a 24-column grid system, while Part B should have a 16-column one. The challenge arises from the fact that Bootstrap only allows for a single customization file, preventing me from using separate configurations for each part without conflicts.

My dilemma lies in finding a solution to implement multiple customizations for both Part A and Part B. I've explored options like creating multiple entry points for React with Webpack and utilizing multiple HTML files, but these approaches haven't provided a satisfactory answer.

What would be the most effective way to achieve this goal? How can I implement multiple webpack customizations for each module seamlessly?

cssbootstrap-4gridmultiple-columnscss-grid

Answer №1

To achieve customization, create two separate 'bootstap' classes with a prior selector for handling this task effectively. After obtaining customized stylesheets from bootstrap, make sure to modify the CSS using your prior selector class. This will ensure that your CSS only applies when the selector class is present.

For example:

PartA with 12 grid

.partAClass .row{
 margin-left:0;
 margin-right:0
}
.partAClass .col-md-12{ 
  width: 100%; 
}

PartB with 24 grid

.partBClass .row{
 margin-left:10px;
 margin-right:10px;
}
.partBClass .col-md-12{ 
  width: 50%; 
}

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

The size of the SVG <g> element remains zero even though it contains children

I inserted some elements into an SVG with one large group. The basic code for the group is as follows: <svg ng-attr-view-box="{{getViewbox()}}" width="100%" height="100%"> <!-- This will be the global group element I reference below --& ...

javascripthtmlcssangularjssvg

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

Is there a way to create a centered info box that stretches to fit any screen size? ...

javascriptcsshtml

Creating a multi-column layout with HTML and CSS

I'm currently exploring the most effective method to design this concept: https://i.stack.imgur.com/SOQp4.png The black square symbolizes small icons, accompanied by a heading and paragraph for each specific section. The icons need to align with the ...

htmlcss

Keeping everything aligned, my aim is to position the search bar and the logo side by side on the left-hand side and stretch the search bar all the way to the end

Looking to adjust the placement of the logo and search bar on the left side while extending the search bar further to the right. Struggling to get the desired layout? No worries, we've got you covered! Also need a join and log in button aligned to the ...

htmlcss

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

I created a fiddle and was hoping to enable scrolling, but I have been unable to find a solution. http://jsfiddle.net/sq181h3h/3/ I tried both of these options, but nothing seems to be working: #league_chat { overflow-y:scroll; } #league_chat { ...

css

Customizing the React Bootstrap Button by adding a unique icon and button label

Looking for a way to dynamically adjust button height based on the button name length? https://i.sstatic.net/156kO.png The current issue is that the button names are getting cropped. Here's what has been achieved so far: index.css .btn-product { ...

htmlcssreactjsbootstrap-4react-bootstrap

Issue with list-style-image not displaying properly in Gmail on Chrome browser

Having trouble incorporating images into bullet lists in my email templates, specifically with Chrome. I prefer using list-style-image over background-image on the li tag. Is there a solution for this issue? ul { list-style-image: url('../images/Bull ...

htmlcssgoogle-chromegmailhtml-email

Choose an input that is not grouped with the rest

I am facing an issue where I need to group these three inputs together as one continuous form. However, there seems to be a problem with the select input not aligning correctly with the rest of the form. Is there something that I might be doing wrong? & ...

htmlcsstwitter-bootstrap

How can I designate class #1 to the left and class #2 to the right within a loop?

Within a loop in Wordpress, two classes, photos and videos, are generated. As new photos or videos are added, they appear below the last div. The issue I'm facing is that I want all photos to be displayed on the left and all videos on the right, but u ...

phpjavascriptcsswordpressloops

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

csstwitter-bootstrapbootstrap-4

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

javascriptjquerycssapachecookies

Moving objects from one container to another and organizing them

I have multiple small divs (referred to as "inner-div") and several container divs. My goal is to be able to drag the inner-divs to different container-divs and have them automatically rearrange within the new container. I have already set up the divs an ...

jquerycsshtmljquery-ui-draggable

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

Creating a draggable element in JavaScript using React

I've been attempting to create a draggable div element, but I'm encountering some perplexing behavior. The code I'm using is directly from w3schools and it functions correctly for them, however, in my implementation, the div always shifts to ...

javascripthtmlcssreactjs

What is the best way to display three columns on a desktop computer but only one column on a mobile device?

I need help aligning my content in a way that it appears as one big column in the center, with two additional columns on the left and right sides (similar to the image provided). The background color is just for visual reference. https://i.sstatic.net/7a4 ...

htmlbootstrap-4

Sending user input from search component to main App.js in React

I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...

javascripthtmlcssreactjsjson

Inner div click events failing to trigger

When I move the .thumbnail divs outside of the #thumbhider and #thumbcontent divs, the click events function correctly. Currently, they are not working as expected. Website URL: I believe the issue may be related to the overflow:hidden property on the co ...

jqueryhtmlcss

How to target child <div> elements within a parent <div> using jQuery

I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids. My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave th ...

javascriptjqueryhtmlcss

Eliminate the empty space below the fixed footer in Bootstrap 4 when viewing on an iPhone

When I view my website on small mobile devices like 'iPhone SE', I notice white space below my sticky footer. I used the same footer and CSS from Bootstrap examples, but I can't seem to get rid of the whitespace. I initially thought it was ...

twitter-bootstrapbootstrap-4

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...

cssvertical-alignment