CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jitender
Jitender

Reputation: 7971

100% width of col-xs-12 in mobile view using bootstrap

I have box in my HTML page. The box width responsive. on desktop it should take 540px width and in mobile the box should take 100% width. the is centre align in desktop. The problem I am facing is that on mobile view the box width is not touching the device width because of container class. This problem can be fixed for using .row class but when I use class it is also expending the width of box on desktop. Can this require be achieved without writing extra media query. fiddle

<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>

Upvotes: 1

Views: 12999

Answers (2)

HTTP
HTTP

Reputation: 1724

Using media queries is the fastest and most reliable way to attain what you need here I think but If you do not want to then for me my approach is this..

<div class="container hidden-xs visible-sm-block">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>


<div class="row visible-xs-block hidden-sm">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>

Not tried yet but I think this will satisfy your problem.

Hope it helps

Upvotes: 3

joegandy
joegandy

Reputation: 320

See js fiddle:

Fiddle

Did a new mobile class to remove padding on mobile from container, also added padding:0; on col-xs-12

.col-xs-12 {
    padding:0;
}
@media (max-width : 480px) {
    .mobile_fix {
        padding:0;
    }
}

Upvotes: 1

Related Questions