override bootstrap container width - css

I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen.
I created easy fiddle.
Here's a question, is there any way to override container's width inside this container?
<header>
<div class="container">
<div class="content">
</div>
<div class="well">
</div>
<div class="content">
</div>
</div>
<footer>

Here theres a simpler trick that works like a charm: https://css-tricks.com/full-width-containers-limited-width-parents/
Look for: "No calc() needed"
HTML
<header>
<div class="container">
<div class="content"></div>
<div class="well full-width"></div>
<div class="content"></div>
</div>
<footer>
CSS
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

The div container has the following max-width specified in media query as default by bootstrap.
#media (min-width: 768px){
.container{
max-width:750px;
}
}
#media (min-width: 992px){
.container{
max-width:970px;
}
}
To override this add the below style in your stylesheet
// This should be added in default styles, not within media query
.container{
margin:0;
padding:0;
}
#media (min-width: 768px){
.container{
max-width:100%;
}
}
#media (min-width: 992px){
.container{
max-width:100%;
}
}

ORIGINAL + BEST PRACTICE: always move the .well outside of .container to stay idiomatic with Bootstrap.
UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .container styles and/or move the .well outside of .container, your best bet is JavaScript. Here I have made a script that makes .well expand as the width of the window changes.
Here is a jsFiddle
The idea is that you want a negative value for margin-left and margin-right so that .well expands across the screen.

Related

How to change the width for the col-xs bootstrap?

Hey I find nowhere if I can change the default value of col-xs-12
I tried to put that but I all broken...
.col-xs-12 {
width: 600px;
}
If you are a doc where I can find the answer that will be really awesome !
Thx
Never Change Bootstrap classes if you want to change any col- class simply add one more class on same element and style that class, and your external CSS file should be loaded after bootstrap, so the css file has effect
Example:
<div class="col-xs-12 my-custom-width"></div>
<style>
.my-custom-width{
width:600px;
}
</style>
You can use it this way
<div style="max-width:"600px;margin:0 auto">
<div class="col-xs-12"></div>
</div>
OR with media queries
#media (max-width: 600px) {
.col-xs-12{
max-width:600px !important;
}
}

How can I make a large image respond nicely on all screen sizes?

I am using Twitter Bootstrap's img-responsive class.
I have an image (1920x1200) that looks too big, in terms of height, on a lg screen and correct on an xs screen.
If I cut the height of the image, it looks correct on a lg screen, but way too small on an xs screen.
I tried setting the image's max-height, but it also changes the width, resulting in gray space on either side of the image.
How can I make a large image respond nicely on all screen sizes?
<div class="container-fluid text-center">
<div class="row hero-image-container vertical-align">
<img src="../../static/images/house.jpg" class="img-responsive">
<h1 class="hero-image-address">
<i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
</h1>
<div class="hero-image-after"></div>
</div>
</div>
Yasin's answer looks quite practical.
Add media queries to make the image container's height look good in various common viewport size, like so:
.imageContainer{
max-height: 600px;
overflow: hidden;
}
/* common tablet portrait */
#media (min-width: 768px) {
.imageContainer{ max-height: 800px; }
}
/* common tablet landscape */
#media (min-width: 1024px) {
.imageContainer{ max-height: 900px; }
}
/* common 15" notebook */
#media (min-width: 1400px) {
.imageContainer{ max-height: 1000px; }
}
<div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
You can set maxHeight on the parent container and set overflow to hidden. So it will cut off the image. Something like this. This image is 1080px but I am only showing 600px of it.
.imageContainer{
max-height: 600px;
overflow: hidden;
<div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
.img-holder {
min-height: 500px;
background: url('http://wfiles.brothersoft.com/w/waterfall-hd-wallpaper_171535-1920x1200.jpg') center center no-repeat;
background-size: cover;
}
#media screen and (max-width:768px) {
.img-holder {
min-height: 300px;
}
}
#media screen and (max-width:400px) {
.img-holder {
min-height: 200px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid text-center">
<div class="row hero-image-container vertical-align">
<div class="img-holder">
</div>
<h1 class="hero-image-address">
<i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
</h1>
<div class="hero-image-after"></div>
</div>
</div>
Try using it as background-image like this with background-size:cover.

How to make 3 to 2 column responsive design with variable heights?

Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.
The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.
here is css code example:
/* 3 columns css */
.colLeft, .colRight, .colMid{
width: 280px;
float: left;
}
.colMid{
width: 500px;
}
.colRight{
width: 240px;
}
.container{
width: 1020px;
margin: 0 auto;
}
/* Media queries */
#media screen and (max-width: 1020px) {
.container {
width: 780px!important;
}
.rightCol{
width: 280px;
}
}
Html:
<div class="container">
<div class="leftCol">
</div>
<div class="midCol">
</div>
<div class="rightCol">
</div>
</div>
this code works fine, But mid column height push the transformed right column down.
My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?
Thanks,
Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.
I found the solution, using only CSS/HTML. Here is the explanation:
I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.
Initially the rightCol-left is set to "display:none"
when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)
here is the CSS:
.rightCol-left{display:none;} /*duplicate div*/
#media screen and (max-width: 1020px) {
.container {
width:780px!important;
}
.rightCol{
display:none;
}
.rightCol-left{
display:block;
width:280px;
}
}
here is the HTML:
<div class="leftCol">
/*Left column content*/
<div class="rightCol-left"> /* will be displayed when screen is below 1020px */
</div>
</div>
<div class="midCol">
/* mid column content */
</div>
<div class="rightCol"> /* gets hidden when screen is below 1020px */
</div>
This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.

Bootstrap 3 Jumbotron fluid height according to responsive image within

I have a jumbotron in which there is a DIV. The DIV contains an image which is set to be responsive like below:
<div class="jumbotron">
<div id="header" class="container">
<div class="header-photo">
<img src="img/pic.png"class="img-responsive">
</div>
</div>
</div>
And the following CSS...
.jumbotron {
height: 420px;
background: transparent;
}
.header-photo {
position: absolute;
left: 0px;
top: 24px;
}
#header.container {
position: relative;
}
When I resize the browser window, the image shrinks (as it should), but the jumbotron height stays at 420px.
How do I make the jumbotron height react in a fluid way to contain the image (whatever size it is? Setting the jumbotron height to 100% has no effect.
If you are working with LESS you could use the bootstrap variables and media queries.
.jumbotron{
#media (max-width: #screen-md-min) {
height: 287px; //Or any value you want
}
}
If you are working just with CSS you can change #screen-md-min to 992px

Variable width DIV using pixel minimum and maximum widths?

Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.
the maximum width of the div is 1200px
the minimum width of the div is 900px
When someone resizes their browser I need that div to expand or contract depending on the viewport size.
Any thoughts on how I can do this [is this possible without javascript?]?
UPDATE
This is where I got to - seems to work well in most browsers until I hit IE7..
<div id="viewport" class="[[*layout]]">
<div id="contentwrapper">
<div class="wrapper logo">
<div id="header">
[[$TopNav]]
</div>
<div id="content" class="homepage">
[[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
</div>
</div>
</div>
<div class="wrapper footer">
<div id="footer">
<div id="footnav">[[$FootNav]]</div>
<div id="copyright">[[$Copyright]]</div>
<div id="news-feed">[[$NewsFeed]]</div>
</div>
</div>
div {border: 1px dotted #ccc;}
div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}
div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}
div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}
div#header {}
.wrapper {
margin:0 auto;
height:150px;
width:100%;
max-width:1110px;
min-width:1060px;
text-align:left;
}
.wrapper.logo {
background:transparent
url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
}
div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}
CSS has 2 properties for those scenarios, that work from IE7+ called:
min-width: https://developer.mozilla.org/en/CSS/min-width
max-width: https://developer.mozilla.org/en/CSS/max-width
That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.
For a no-js solution on modern browser you can use CSS media queries like so
#media screen and (max-width: 1199px) {
div { width: 900px; }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
}
this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries
a simple proof-of-concept demo
<html>
<head>
<style>
div { margin: 0 auto; border: 1px red solid }
div:after { display: block; }
#media screen and (max-width: 1199px) {
div { width: 900px; }
div:after { content: " max-width is 1199px" }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
div:after { content: " min-width is 1200px" }
}
</style>
</head>
<body>
<div>Resize your browser</div>
</body>
</html>

Resources