Nesting container within a container bootstrap -
i'm have little bit of trouble getting definitive answer on containers in bootstrap. it's clear should not nest .container
within .container-fluid
, visa versa, ok nest .container
within .container
? trying create layout has outer div full width , inner div smaller holds content, box within box. i'm not sure proper way in bootstrap is.
yes, never nest container inside another.
from bootstrap docs:
containers
bootstrap requires containing element wrap site contents , house our grid system. may choose 1 of 2 containers use in projects. note that, due padding , more, neither container nestable.
you can wrap .container
inside custom class .outer-container
has 100% width. set width near 75% when screen size reduced show inner container has smaller width.
.outer-container { background: tomato; width: 100%; } .container { background: lightblue; } @media (max-width: 1200px) { .container { width: 75%; } }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="outer-container"> <div class="container"> fixed </div> </div>
Comments
Post a Comment