I have something like this:
<div class="panel">
<div class="panel-body">
<div class="image-overlay">
<img class="img-responsive"> src="..."/>
</div>
</div>
</div>
and if I set manually height of "panel-body" to 400px. Its working as it should.
However once opening on small display height stays 400px but image is resized to smaller and half of panel is empty. How can I have responsive image in panel with also panel responsive?
can you try not to put any dimension? try to check this one
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm not sure I understand your question, but I think you're probably looking for this:
<img src="/mysrc.jpg" style="width:100%;max-height:400px;" />
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 a page I'm making where where on small screens (ie: phones) I want the image above the text, and on larger screens I want the image to the right of the text.
I'm using offset to pull the image right on larger screens. However, it's not aligning properly on larger screens (smaller screens are just as I would expect). The text on the left doesn't start until after the image on the right. I haven't used the offset feature of bootstrap before and I'm not quite sure what I'm doing wrong...
Here is a screenshot (unwanted gap marked in yellow)
And the code...
<div class="row">
<div class="col-md-4 col-xs-12 col-md-offset-8">
<img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">
</div>
<div class="col-md-8 col-xs-12">
<?php echo nl2br($p['desc_landing']); ?>
</div>
</div>
Any help appreciated!
Heyho,
what you are doing with col-md-offset-8 is pushing the image to the right with a margin, thus filling the whole line with this column.
The math: 4+8=12
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
Your Picture
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
Your text
</div>
You can solve this via push and pull. So on medium screens your text will show "first" on the left side with ratio 8/4. Then on smaller screens it will go to normal order where the picture is on the top and the text beneath. Hope that helps :)
Oh, for test reasons i put col-sm. Otherwise you cant see the result in the preview :)
Greetings
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
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
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.