1

Since this question is outdated my question is how do I create a fluid row within non-fluid container.

I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.

here is my html:

<div class="container"> <div class="row-fluid"> <div id="map-canvas" class="container-fluid"></div> </div> </div>

row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).

JS Fiddle, Please increase output window width so you can see the difference.

Thanks in advance

Improve this question
5
  • Just a quick question to clarify; do you mean 'fluid'? Commented May 31, 2015 at 11:00
  • Oops yes, sorry for typo, a consistent typo... Commented May 31, 2015 at 11:01
  • @odedta jsfiddle.net/m1L6pfwm attached... Commented May 31, 2015 at 11:16
  • 1
    This is basically going to break the Bootstrap markup and reasoning... the whole post in having a parent that is non fluid is just that and you're trying to break it... if you really need to do that just use position:fixed;width: 100% !important;. Seriously now, you're trying to create bad markup! use good HTML markup to achieve what you like, if you can't change the HTML directly use jQuery for that. Commented May 31, 2015 at 12:01
  • Thanks well do that :) Commented May 31, 2015 at 12:44

3 Answers 3

Reset to default
5

Try following code. You can make a 100% width container inside fixed layout.

http://jsfiddle.net/m1L6pfwm/2/

HTML

 <div class="row row-full"> content... </>

CSS

.row-full{ width: 100vw; position: relative; margin-left: -50vw; height: 100px; margin-top: 100px; left: 50%; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

It works perfectly as i wanted but I don't understand why put margin-left and left properties? and more importantly why it won't work without these two properties? A bit explanation would be nice. Thanks.
We need both properties in order to get it center aligned. following is the visual explanation. postimg.org/image/dry5m6fzt
1

I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?

http://bootply.com/KP9j6dKCES

<div class="container-fluid"> <div class="row" style="height:100px; background: #f00;"> this should take 100% width </div> </div>
Improve this answer

1 Comment

thanks for your help. I wanted to have a single container and not a mixture otherwise what you have suggested is achieves my result.
0

Either use apropriate layout or get same effect using following 

<div class="row-fluid" style="position:absolute;z-index:5"> <div id="map-canvas" class="container-fluid"></div> </div> <div class="container" style="z-index:0"> <--fluid with respect to first static/relative parent--> <div class="row-fluid"> <div id="map-canvas" class="container-fluid"></div> </div> </div>

You can play same effect using Z-index but not with it's grand parent

Improve this answer

1 Comment

you are right that's what i want. solution is i have to different containers but i want a more appropriate solution then dividing my layout into multiple containers

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.