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
Related
I am attempting to modify the Dark Nav with White Page Header template in TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874). I wish to add a background color to the template. To do this, I attempted to add class="bg-amber-300" to the top-level div:
<div class="bg-amber-300 min-h-full">
///
</div>
...but that did not work. I also tried adding a color class to the main tags further down in the template:
<main class="bg-amber-300">
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
<!-- /End replace -->
</div>
</main>
But that also did not work. In both cases there is still a large white gap at the bottom of the view. How can I add background color so that the entire view below the nav bar is filled?
I think it's working as it should because min-h-full means to take the full height which is specified in the content section as h-96
if you want to get rid of the white space give the top-level div this class
min-h-screen bg-amber-300
https://play.tailwindcss.com/fGw3zeIf4n
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
Here We have one confusion.
Can I use bootstrap3 classes in bootstrap 4 version
Example: panel, pull-right, col-xs-4
in my excising project. I used these classes. can I go with same or replace with new classes(panel-card).
In Bootstrap 4-
(1) panels, wells, and thumbnails have been replaced by cards.
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
(2) pull-left and pull-right are replaced by float-left and float-right.
(3) .col-xs-4 is now .col-4
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.
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.