Tips for personalizing Bootstrap columns using identical class names?

Is there a way to customize the background color of each individual .col-5 within the same row while using Bootstrap and a custom CSS file? Changing the styles for one column seems to affect all columns with the same class name.

Edit: I'm looking for solutions beyond simply changing background colors using a span tag.

What is the recommended approach to address this challenge?

<body>


    <header>
      <div class="logo"><h1>Name</h1></div>
    </header>



    <div id="sideBar">

    </div>



    <div id="rowContainer1">

      <div class="row">
        <div class="col-5">
          Hello
        </div>
        <div class="col-5">
          Hello
        </div>
      </div>

    </div>



    <div id="rowContainer2">

      <div class="row">
        <div class="col-5">
          Hello
        </div>
        <div class="col-5">
          Hello
        </div>
      </div>

    </div>



  </body>
</html>

Answer №1

Utilizing jQuery allows for achieving this task without the necessity of a unique id, although it may be simpler to handle if ids are utilized.

.col-red { background-color: red; }
.col-green { background-color: green; }

$("#rowContainer1 div[class=col-5]").eq(1).addClass("col-red");

JSFiddle demonstration

Answer №2

You have the option to assign unique classes to each column.

.col-blue { background-color: blue; }
.col-yellow { background-color: yellow; }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-5 col-blue">
    BLUE
  </div>
  <div class="col-5 col-yellow">
    YELLOW
  </div>
</div>

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

Combining two flex elements with auto-growing capabilities in react-native

I am excited about using react-native to have a TextInput aligned with a MaterialIcons.Button in the same line. I have been trying to center these elements horizontally but haven't been successful with the code below: import React from 'react&apo ...

"Discover the power of D3.JS with three dazzling charts on a single page, plus a host of additional

As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...

Unique property in css without a specified value

I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

An absolutely positioned element will always move within its relative container

After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resiz ...

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

How can you add padding to an HTML page using CSS?

I've been attempting to use padding-bottom:90px; in order to shift Tweets by ‎@StackOverflow (the entire tweets section) downwards on the page. I want to move it further down using the above padding, but it doesn't seem to be working for me. H ...

Responsive SmoothSlider

Need help fixing the responsive breadcrumbs in my slick slider. The slick-content-slider is taking a strange height and I want to ensure that every div remains on the same line. Thank you in advance! $('.slick-content-slider').slick({ slides ...

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

Tips for utilizing a CSS selector to find a single element with two attributes simultaneously in Selenium using Python

Currently, I am using Selenium Python Css selector to target 1 component with 2 attributes simultaneously, both of which should be partially matched. Successfully located the element with Xpath: fifth_item = driver.find_element_by_xpath("/html/body/div[c ...

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

Diverse Values within the Inner Border

Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...

I'm looking for assistance on how to set the minimum height using jQuery. Can anyone provide

My attempt to use the minHeight property in one of my divs is not successful, and I am unsure why... <div id="countries"> <div class="fixed"> <div class="country" style="marging-left:0px;"></div> <div class="country"&g ...

The lower section of the scrollbar is not visible

Whenever the vertical scroll bar appears on my website, the bottom half of it seems to be missing. For a live demonstration, you can visit the site HERE (navigate to the "FURTHER READING" tab). HTML: <!DOCTYPE html> <html lang="en"> <h ...

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

The appearance of the webkit-scrollbar is not reflecting the intended style

I have successfully created a wrapper for a styled scrollbar in React JS - import styled from '@emotion/styled'; export const ScrollbarWrapper = styled.div(() => ({ maxHeight: '65vh', overflowY: 'auto', '*::-web ...

Bootstrap link causing alterations to my CSS code

After incorporating Bootstrap into my HTML, I noticed that it caused some unexpected changes to my CSS code. Original CSS: https://i.stack.imgur.com/EsE6J.jpg Modified CSS after applying Bootstrap: https://i.stack.imgur.com/yH1r9.jpg Link to Bootstrap ...

What CSS attribute determines the distinction in visual presentation between two elements that share the same CSS configurations?

In the HTML code below, there is a button and a div with the same class and content: <div class="root"><!-- --><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!-- - ...