We are using Bootstrap 3 on our site and I'm attempting to extend content outside of the container, but am coming up unsuccessful. Here is an image on what I'm trying to do:
https://imgur.com/a/tGDMf
I would like to use 9 columns on the right of the container for content in 3 sections, and use a div to cover the left 3 columns and extend to the edge of the screen. I have used :before and :after attributes for extending background's to the edge of the screen in the past, but the content has been inside the container. I need the content to go outside of the container if possible. The content above and below this section will be using Bootstraps columns so I'd like to follow suit with the responsiveness and structure.
Any ideas on how to solve this problem?
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
All grid CSS frameworks have some kind of 'container' class that represents the grid boundaries.
Imagine that I have a page with:
header
search form
search results (loaded dynamically)
some more dynamic content
footer
Should (A) I have everything above inside one single grid container (i.e. to have a container per page); or it is (B) better to have each of above parts (i.e. logical parts of the page) to be a separate container, or (C) is is ok to have 3 containers: header, content, footer.
Is there any difference with this approaches or it is just personal choice? I just couldn't find any advice on this topic.
Depends on the project and what the design requirements are. The "container" class should contain the content, anything that goes outside of that container should not be inside the container div.
Example:
A header that has a background color that stretches 100% of the screen width, but with header elements that are left / right aligned with the container.
The markup would look something like:
<header><!-- this would be 100% width -->
<div class="container></div><!-- this would be whatever your container max-width value is -->
</header>
I am using bootstrap responsive grid system only as I need only that from whole framework.
I understand that I should use grid system only for layout of the page.
But for example I have one div that should contain image on the left and some text on the right side.
I can put bootstrap grid inside that div to get desired layout as that is just two columns.
Is this how bootstrap grid should be used or this is bad practice and I shouldn't use grid inside smaller elements?
It is fine as long as you place grid elements in the right order of hierarchy:
container[-fluid] > row > col-??-## > row > col-??-## and so on.
Remember to NEVER nest a container inside another container. You should not place a container immediately followed by a col element.
All in all, it's ok to give layout to the inner part of your div regardless of its size.
Is it possible with CSS to have two fixed headers which when made responsive affect the content of the scrollable element. I.e. has the headers gets bigger it pushes down the content below.
I am trying to do it with flex boxes, but stuck on having a second fixed header within and scroll element.
http://codepen.io/labithiotis/pen/tkAlB
Want to avoid using lots of media query or js. feel like there must be a solution with flex box.
I am working on a page with some dynamic content. The main layout is in 3 containers within the same fluid row. I want the first container either to display one of two types of lists, or be absent -- varying by the state of the page.
However when I try to remove the element with a jquery function like $("#container-id").hide(), it slides the containers to the right of it left, skewing the layout of the page. Is there a way to remove this container from view without the other containers shifting left?
Here is an example of what is happening:
http://jsfiddle.net/PHaeA/27/
And here is an example of how I want the containers to appear when the first one is absent: http://jsfiddle.net/gLTyF/5/
Thanks!
Sounds like the easiest workaround would be to (if possible) add a div inside the span with the content and hide that instead of the whole column.
Another way might be to override the twitter bootstrap style to make it float right instead of left:
.row-fluid [class*="span"] {
float: right; }
but I'd guess that would be more likely to cause unintended consequences.
If you want the space preserved, you can use
$('#col1').css({visibility:"hidden"});