Does Owl Carousel Really Work without a fixed width? - twitter-bootstrap-3

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.

Related

How to use bootstrap 5 horizontal Collapse with relative width?

I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!

Why is my bootstrap v3 column not 100% wide on my mobile phone?

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

Can you have a panel fixed to the right in Bootstrap 3?

I have a panel that floats right within a container. When my data-spy affix executes, the side-panel gains the position: fixed property which removes the float: right. The panel becomes fixed at the correct height, but becomes fixed at the left in the container not the right in the container. I cannot simply state a fixed value for the left property because I am using a container fixed to 1200px, not container-fluid and the left offset changes whenever the user resizes their screen.
How can I set the panel mimic float-right while affixed near the top of the view?
<div id="navbarContainer" class="affix-top clearfix" data-spy="affix" data-offset-top="70">
<div class="navbar navbar-inverse navbar-static-top" role="navigation" id="topnavbar">
</div>
</div>
// code removed
<div class="container">
<div id="right_panel" class="panel right-panel pull-right">
<div class="panel-head">
Related Information
</div>
<div class="panel-body">A Basic Panel</div>
</div>
css
.rightpanelAffix{
position:fixed;
top:101px;
}
js
$("#navbarContainer").on("affixed.bs.affix", function () {
$("#body").addClass("bodyAffixPadding");
$("#right_panel").addClass("rightpanelAffix");
});
$("#navbarContainer").on("affixed-top.bs.affix", function () {
$("#body").removeClass("bodyAffixPadding");
$("#right_panel").removeClass("rightpanelAffix");
});
Please Show us some code. and may be you want to ask that you can't adjust your container size. Let me know if this helps.
Check this out
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-6"></div></div></div>

Can I layer content in a bootstrap 3 grid column

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

Bootstrap grid system - hierarchy of the .container div in relation to other wrappers

I have just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.