CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Khaines0625
Khaines0625

Reputation: 407

How to padding in change bootstrap container class

Ive been trying to remove the 15px padding that the container class gives elements.

HTML:

<div class="container body-container" id="mainContent">
     some stuff
</div>

CSS:

.container.body-container {
    padding: 0px;
    background-color: #FFFFFF;
}

I've tried many things. I've tried changing the container class itself and make a custom container class like this code. In the image below Im looking at the code and the displayed padding in chrome. It shows that there is 15px padding around the container element. I want all the padding gone.

enter image description here

The entire css file, as requested:

 body {
    overflow-x: hidden;
    background-color: #B47B10;
    font-size: 16px;
 }


#nameTitle{
    color: #003300;
    text-align: center;
}
#titleCaption{
    color: #B47B10;
    text-align: center;
    font-size: 16px;
}

#topBar{
    background-color: #B47B10;
}

#navBarLink{
    color: #B47B10;
}
#navBarLink:hover{
    color: #FFFFFF;
}

#myCarousel{
    background-color: #FFFFFF;
    max-width: 100%;
    position:relative;
    margin: 0px;
    border: 0px;
}

#cImage{
    max-height: 100%;
    max-width: 100%;
}
#wellItem{
    padding-top: 15px;
    background-color: #B47B10;
}
#wellItem:hover{
    background-color: #A46B00;
}

#invertedLink{
    color: #003300;
}
#invertedLink:hover{
    color: #FFFFFF;
}
.body-container {
    padding: 0px!important;
    background-color: #FFFFFF;
}
.carousel-caption {
    padding: 0px;

    position: relative;
    left: auto;
    right: auto;
}
.input-group{
    margin-right: 30px;
}
.multi-item-carousel{
  .carousel-inner{
    > .item{
        transition: 500ms ease left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }

    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }

  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}
.navbar-inverse {
  background-color: #003300;
  border-color: #080808;
}
@media(min-width:768px) {
    body {
        font-size: 20px;
    }
}

Upvotes: 4

Views: 9356

Answers (2)

Aman Rawat
Aman Rawat

Reputation: 2625

Your css is working just fine. I think it's your position of importing the files

put bootstrap.min.css before your custom css file like this

<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/my_style.css" rel="stylesheet"/>

The css file which is at the bottom will override the others. Hope this will help

It can also be the cache problem as the website can be cached in your browser. So clear the cache and then run your code or run your code in incognito window

.container.body-container{
  padding: 0px;
  background-color: #FF0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  
<div class="container body-container" id="mainContent">
  some stuff
 </div>

Upvotes: 3

kkesley
kkesley

Reputation: 3406

try using

.body-container {
    padding: 0px!important;
    background-color: #FFFFFF;
}

or

<div class="container" style="padding:0!important" id="mainContent">
     some stuff
</div>

Upvotes: 1

Related Questions