Ways to change the background color of a Bootstrap row excluding column padding

I'm working on adjusting the background to fit within bootstrap's column sizes while still extending across the entire row. Does anyone have suggestions on how to achieve this?

Here is what I've tried:

.yourcontent {
  margin-bottom: 5px;
}

.yourcontent [class^=col-] {
  background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
        <button type="button" class="btn btn-primary">Foo</button>
        <button type="button" class="btn btn-primary">Bar</button>
        <button type="button" class="btn btn-primary">Foobar</button>
        <button type="button" class="btn btn-primary">Barfoo</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">

      <div class="row yourcontent">
        <div class="col-xs-6">
          <div class="">
            Foo
          </div>
        </div>
        <div class="col-xs-2">
          <div class="">
            Bar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="">
            Foobar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="">
            Barfoo
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

JSFiddle

I want to achieve a similar look, with the white space between columns also filled with color:

.yourcontent {
  margin-bottom: 5px;
  background-color: cyan;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
        <button type="button" class="btn btn-primary">Foo</button>
        <button type="button" class="btn btn-primary">Bar</button>
        <button type="button" class="btn btn-primary">Foobar</button>
        <button type="button" class="btn btn-primary">Barfoo</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">

      <div class="row">
        <div class="col-xs-6">
          <div class="yourcontent">
            Foo
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Bar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Foobar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Barfoo
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

JSFiddle

I'm looking for a way for the background to extend throughout the whole row without affecting the padding of the first and last col-xs-* elements in the given row. Any suggestions on how to approach this?

htmlcsstwitter-bootstrap

Answer №1

If you are familiar with Bootstrap 4, you may have come across the .no-gutters class, which helps remove the space between columns. While this class is not available in Bootstrap 3, you can easily create it yourself by adding some custom CSS rules.

.yourcontent {
  margin-bottom: 5px;
  background-color: cyan;
}

/* 
  Optional, to fix to width of the row 
*/
.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutters > [class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group" role="group" style="margin-top: 5px; margin-bottom: 5px">
        <button type="button" class="btn btn-primary">Foo</button>
        <button type="button" class="btn btn-primary">Bar</button>
        <button type="button" class="btn btn-primary">Foobar</button>
        <button type="button" class="btn btn-primary">Barfoo</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">

      <div class="row no-gutters">
        <div class="col-xs-6">
          <div class="yourcontent">
            Foo
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Bar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Foobar
          </div>
        </div>
        <div class="col-xs-2">
          <div class="yourcontent">
            Barfoo
          </div>
        </div>
      </div>

    </div>

  </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

Having Trouble Scooting Down the Page on Mobile?

Hello there! I'm having a bit of trouble trying to figure out why the scrolling functionality isn't working on my small web app when it reaches the media breakpoint for mobile devices. If you'd like to take a look, here's the link to ...

htmlcssscroll

Switching the Focus in Laravel Layouts

My understanding of CSS media queries includes: @media screen and (orientation: portrait) { div.container { ... } } @media screen and (orientation: landscape) { div.container { ... } } Despite this knowledge, I am looking ...

htmlcssbootstrap-4laravel-blade

Shifting focus among an array of standard <input> controls with each keystroke

When working with Angular, I encountered a situation where I have an array of arrays of numbers, as shown below: [ [1,1,1,1], [1,1,1,1] ] In my HTML file, I am using ngFor to generate input controls like this: <table> <tbody> ...

htmlangular

Changing the color of a selected variant in a BootstrapVue table using Vue.js

I am making use of the bootstrap-vue table row select support feature and I would like to change the color of the selected-variant prop of the b-table. Currently, the color is set to info for the selected row in the table. I wish to customize it and set th ...

cssvue.jsbootstrap-4bootstrap-tablebootstrap-vue

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

jqueryhtmlbuttoncheckboxscroll

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties... I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div ...

javascriptcss

Curved upper right corner with Bootstrap

Currently, I am using Bootstrap's list-group-flush to showcase a left vertical nav on my website. I am trying to achieve a rounded top left corner for the navigation. While using class="rounded-top" works as expected, applying class="rounded-top-left ...

twitter-bootstrapbootstrap-4

After 30 seconds of inactivity, apply the CSS once, then remove it before repeating the process

I've got a unique little CodePen with an animation that I want to execute only if the user hasn't clicked on the <div class="someDiv"> for 30 seconds. My question is, can someone guide me in the right direction so that when someone doesn&a ...

javascriptjquerycss

Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automa ...

javascriptjquerycssiframeads

What steps should I take to ensure my three.js project is compatible with iPhone testing?

I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...

javascripthtmlthree.js

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

cssreactjs

What is the best way to trigger a refresh of a cached CSS file on a JSP website, without using PHP?

I am currently making significant changes to my site by modifying a CSS file. Is there a way to compel clients to refresh the CSS in order to see the new updates? Unfortunately, it is not feasible to ask thousands of people to manually reload the page us ...

javascripthtmlcssjspcaching

What is the best positioning option to choose: "Relative? Static, or something else?"

I decided not to use float for positioning my divs in CSS; instead, I used the position property with relative value. However, when viewing the site on different screen resolutions, all the divs end up getting jumbled. Can someone please explain what I m ...

htmlcsscss-position

Issue with Hidden Horizontal Scrollbar Functionality in JQuery Mobile Not Resolving

http://jsbin.com/UREQUbu/1/edit I have a header with 9 buttons. I managed to get the horizontal scrollbar to work, but I want it hidden yet still scrollable. I came across a JQuery plugin that worked perfectly for scrolling on my laptop, but unfortunately ...

htmlcssjquery-mobile

Photo showing up in an unexpected location

I am looking to add a small image before each line on my list. Here is the CSS code: .left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;} .left a.list:link, a:visited, a:active {color:b ...

htmlcss

Can you confirm if the explanation provided is accurate in distinguishing between inline and block-level elements in HTML?

The absence of the align attribute in the font tag is due to its status as an inline element. To center text, utilize the <center> tag instead. ...

htmlblockinline

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

I am looking to keep the mat-select element displaying the placeholder at all times, even if an option has been selected. Below is my HTML code: <mat-select [formControlName]="'language'" placeholder="Language"> <mat-option value=" ...

htmlangularangular-material

Steps for accessing specific menu div on a new tab

I'm facing an issue with my one page website. Whenever I click on a menu item, it directs me to a specific div tag on the page. However, if I right-click on a menu item and select 'open in new tab', it opens the URL "www.mysite.com/#" instea ...

javascriptjqueryhtml

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

javascriptjqueryhtmlcssfunction

How do you incorporate a foreach function into HTML?

Are you a beginner searching for a way to include PHP foreach output in HTML? Here is the query code: $qr = $this->db->query("select journalDetail.COA_CODE, COA_TITLE, COA_TYPE from t_journal_detail journalDetail left join r_coa coaTitle on journalD ...

phphtml