CODEWITHSUNDEEP
htmlcssbootstrap-4
Lakshan Umesh
Lakshan Umesh

Reputation: 111

How to change background color of bootstrap column

I want to change the background color of one column in bootstrap row. There will be padding inside row as well. Please refer the below screenshot of requirement.

enter image description here

    <div class="container event-details-wrapper">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h3 class="event-tag tooltip" tooltip="Click here to copy the event code" @click.stop="copyEvent($event)">#{{event.code}}</h3>
      <UserWidget :repeatEvent="true" :email="event.name" :title="event.duration" :action="goToEvent"/>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="display:flex;">
      <div class="QnA-Details"></div>
      <div class="Sub-QnA-Details">
        <p>Q&A</p>
        <span>3000</span>
      </div>
      <div class="Form-Details"></div>
      <div class="Sub-Form-Details">
        <p>Forms</p>
        <span>06</span>
      </div>
      <div class="Polls-Details"></div>
      <div class="Sub-Polls-Details">
        <p>Polls</p>
        <span>02</span>
      </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="event-actions-wrapper" v-if="!isExpired">
      <ul>
        <li><div class="event-action download tooltip" tooltip="Project event" @click.stop="download"></div></li>
        <li><div class="event-action project tooltip" tooltip="Project event" @click.stop="project"></div></li>
        <li><div class="event-action phone tooltip" tooltip="Project event" @click.stop="phone"></div></li>
      </ul>
    </div>
      </div>
    </div>
    </div>

here how is my code inside this model. When I try to change the particular column color padding area does not colored.

enter image description here

How should I achieve top requirement using this scenario? I used bootstrap, because its needs to be responsive for mobile devices as well.

Upvotes: 1

Views: 7632

Answers (2)

Olivier Girardot
Olivier Girardot

Reputation: 409

Would something like this work?

<style>
.background {
  padding: 15px;  /* Just an example padding */
  background: lightgrey; /* Just an example color */
  background-clip: padding-box;  
}
</style>

It's the background-clip: border-box; the important part here. This is what makes the background color extend to the border of the area you are targeting. You can also make it include the border itself like this: background-clip: border-box;

And bellow I have added the class background to the div:

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 background">
  <div class="event-actions-wrapper" v-if="!isExpired">
      <ul>
        <li><div class="event-action download tooltip" tooltip="Project 
        event" @click.stop="download"></div></li>
        <li><div class="event-action project tooltip" tooltip="Project 
        event" @click.stop="project"></div></li>
        <li><div class="event-action phone tooltip" tooltip="Project event" 
        @click.stop="phone"></div></li>
      </ul>
  </div>
</div>

Upvotes: 1

MaxiGui
MaxiGui

Reputation: 6348

Based on your code, I set directly background on last column by adding as below:

style="background: red;"

And it seems to work fine. If it does not by you then probably we are missing some css.

INFO: I just added background :grey; on row for the demo

DEMO:

.row{
  background: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="container event-details-wrapper">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h3 class="event-tag tooltip" tooltip="Click here to copy the event code" @click.stop="copyEvent($event)">#{{event.code}}</h3>
      <UserWidget :repeatEvent="true" :email="event.name" :title="event.duration" :action="goToEvent"/>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="display:flex;">
      <div class="QnA-Details"></div>
        <div class="Sub-QnA-Details">
          <p>Q&A</p>
          <span>3000</span>
        </div>
        <div class="Form-Details"></div>
        <div class="Sub-Form-Details">
          <p>Forms</p>
          <span>06</span>
        </div>
        <div class="Polls-Details"></div>
        <div class="Sub-Polls-Details">
          <p>Polls</p>
          <span>02</span>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="background: red;">
        <div class="event-actions-wrapper" v-if="!isExpired">
          <ul>
            <li><div class="event-action download tooltip" tooltip="Project event" @click.stop="download"></div></li>
            <li><div class="event-action project tooltip" tooltip="Project event" @click.stop="project"></div></li>
            <li><div class="event-action phone tooltip" tooltip="Project event" @click.stop="phone"></div></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Upvotes: 3

Related Questions