Bootstrap - Styling jumbotron elements

Question

I'm trying to create simple mobile web site for calendar events.

Here's the very basic version of it: http://orhancanceylan.com/test/v2/event.html

The problem in here is; purple backgrounded areas are only cover the texts. But I want them to fit the full width of the jumbotron image like the mock-up below.

I tried to add the below code:

.jumbotron row,
.jumbotron .row { 
  color: #efefef;
  background-color: rgba(157,52,99,0.7);
  width: 100%;
}

However it's still only covers the text content.

How should I fix this issue?

Thanks,

Answer 1

When you're using the bootstrap framework, you'll have to override some properties of standard classes. I recommend only using the grid to avoid the overriding. If you don't want to get the fixed with you can use the container-fluid class. I've worked out a fiddle to solve your problem. Do note that I've overwritten the default bootstrapp css, which I don't recommend, but it can help you for now. I hope this helps.

Container fluid: bootstrap container fluid

Fiddle: Allora - fix css

Html adaptations:

<div class="jumbotron">
<h1>Pampalarla Alis Veris Qeyff</h1>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-time"></span></h3>
      <h4> Thursday 12:30</h4>
    </div>
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3>
      <h4> Kanyon</h4>
    </div>
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-user"></span></h3>
      <h4>6 People</h4>
    </div>
   </div>
  </div>
 </div> 

Css adaptations:

.jumbotron{
    position: relative;
    padding:0 !important;
    margin-top:70px !important;
    background: #eee;
    margin-top: 23px;
    text-align:center;
    margin-bottom: 0 !important;
}
.container-fluid{
    padding:0 !important;
}
.col-xs-4{
    background:rgba(157,52,99,0.7);    
}