CODEWITHSUNDEEP
csstwitter-bootstrap
Wagner Danda da Silva Filho
Wagner Danda da Silva Filho

Reputation: 5457

tweaking .container with .container-fluid based on screen size

Here is a challenge for bootstrap wizards: how to have my layout swap between .container and .container-fluid depending on the screen size. I.e. on mobile I want fluid, else use the regular container.

<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
  
  <div class="row">
    ...
  </div>
</div>

Disclaimer: the workaround I'm doing right now is tweaking the margins using media query. I.e. using .container and adding negative margins on mobile. Wondering if there is a better way of achieving this.

Requirements: Ideally I want a purely css-based solution, if really not possible, please consider that I'm using angular 1.x.

PS: I do not want to duplicate whats inside "row", in other words, I'm not interested in doing .visible-xs and .hidden-xs with duplicated content...

Thanks!

Upvotes: 0

Views: 1890

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

The only difference between the container and container-fluid is width so the child elements (rows, cols, etc..) will behave the same in either.

The container becomes full-width (100%) on xs screens by default, so at screen widths less than 768px, the container and container-fluid behave exactly the same. You shouldn't need to make any changes, and you can simply use container.

http://codeply.com/go/8ei2hMKBKd

Upvotes: 3

Related Questions