I have a customized bootstrap setup to use 960 grid instead of the default width. I have this HTML using the bootstrap grid:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
</div>
However on a specific page I need to be exact in their width, for instance I need the first row to be 280 pixels, the second 500 pixels and the third 160 pixels. How can I do that using the bootstrap grid so that it still will be responsive for mobile devices?
Related
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.
I'd like to put a stack of divs inside a single Bootstrap 3 column.
Specifically I want to layer a loading progress gif image on top of the image that is being loaded.
However simply placing the image tags inside a Bootstrap column and setting the CSS z-order doesn't work.
<div class="container">
<div class="col-xs-4 left">Left Col</div>
<div class="col-xs-4 imageholder">
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/lgspinner.gif" width="40px" height="40px" style="z-index:999"/>
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/yeoman.png" style="z-index:-1"/>
</div>
<div class="col-xs-4 right">Right Col</div>
Plunk : http://plnkr.co/8T7hyb900g3d4z9IO6Ta
Is there a way to achieve this and retain responsive behaviors?
You could use absolute positioning for <img> tags
How can I get better control over how Bootstrap 3 is scaling my col width.
Lets say for example that i create two columns using the following code:
<div class="xs-col-6"></div>
<div class="xs-col-6"></div>
When I re-size the window I want the the first column to take up 80% of the space and the right one to use 20% of the space. How can i do this?
This is what I tried:
<div class="xs-col-6" style="width:80%;"></div>
<div class="xs-col-6" style="width:20%;"></div>
With bootstrap you can use column, they are 12, so you can have this (9+3 = 12):
<div class="col-xs-9"></div>
<div class="col-xs-3"></div>
also, you can have different behavior depending on the device size with col-sm-*, col-md-* and col-lg-*.
Like this :
<div class="col-xs-12 col-sm-9 col-md-6"></div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>
And if you want overwrite bootstrap css, you can, but maybe you need to add !important to your css property
Good Morning!
I'm working on a prototype and I would like to know the "proper" way to change the width of Foundation's Orbit Slider yet still keep it's responsiveness.
Currently - I had changed the width of the slider container to a smaller percentage (73%) - but when viewed at mobile size, it just doesn't seem quite right. Not to mention the arrows have floated upwards and I'd rather not hack some css to get them positioned correctly.
Orbit CSS: http://naivestudio.net/win-prototype/prototype/orbit.php (put on separate page just for this question - changes will be made in the app.css file)
HTML in Index Page - Note the video is outside of the slider, but I will have it floated next to it in the header container.
<div id="headcontain" class="row">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div>
<img src="http://placehold.it/235x300&text=Video">
</div>
Javascript
<!-- Include Orbit -->
<script src="foundation/javascripts/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
window).load(function() {
$("#featured").orbit( {
timer: false
});
});
</script>
the proper way to resize an orbit slider is to wrap it in a div with a class specifying how many columns you'd like it to stretch across. By changing the number of columns the container stretches across, the framework will then automatically resize the slider. If you're using foundation 4 or greater you'll need to use their new syntax of "large-(#)" or "small-(#)" when specifying the number of columns.
You had said that on small resolution it looked incorrect, if you're using Foundation 4+ you can use a combination of both large and small size calls to affect how it appears on both large and small resolutions; the following example will span twelve columns on a large resolution and only span 3 columns when you reach a smaller resolution.
Situational Resolution Sizing Example for Foundation 4+:
<div class="large-12 small-3 columns">
Full Example for Foundation 4+:
<div id="headcontain" class="row">
<div class="large-12 small-3 columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/large12-->
</div><!--/headcontain-->
Full Example for Foundation 3-:
<div id="headcontain" class="row">
<div class="twelve columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/twelveColumns-->
</div><!--/headcontain-->
Hope this helps!
As of v6.5.3 it appears that this still hasn't been resolved BUT it looks like there will be fix in v7. More info hero on Github.