I'm having issues with Bootstrap 4 breadcrumbs "interrupting" the tab-bar dividing line (see https://www.codeply.com/go/ga2O7RQhty)
I've tried playing around with margins, padding etc on the the breadcrumb, but no combination works leaving the breadcrumb looking like it should and not interrupting/breaking the tab-bar line.
Use clearfix on the page-header...
<div class="page-header clearfix">
<div class="float-right btn-toolbar">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Audio Library</li>
</ol>
</div>
<h1>
Audio Library
</h1>
</div>
https://www.codeply.com/go/sPTmNxG6MJ
This allows the floated btn-toolbar to clear to the next visual row.
Related
I wish to create a sticky topbar in Foundation 6.
In foundation 5 this was easy; simply add the "sticky" class to the top bar.
In Foundation 6 I believe you have to use the new "sticky" attribute (http://foundation.zurb.com/sites/docs/sticky.html) like so:
<div data-sticky-container>
<nav class="top-bar sticky" data-topbar role="navigation" data-sticky>
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Website Name</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li class="active">Home</li>
<!-- ... -->
</ul>
</div>
</nav>
</div>
However the top bar looks weird as it doesn't take the full width of the webpage.
What is the correct way of creating a sticky topbar in Foundation 6?
I found a solution and i hope you will enjoy it .
what i find solution you can use this freely anywhere in page and it will work like foundation 5.
foundation 6 is just bit tricky in sticky option okay here is code.
<div id="try">
<nav class="sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="try" data-btm-anchor="destroy:bottom" data-margin-top="0" data-margin-bottom="0">
<div class="row columns">
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
</div>
</div>
</nav>
</div>
as you can i see i add a parent div like "try" you must have to do it to tell the sticky where sticky have to start so i used data-anchor-top="try" ok but if you only add this and leave it will go on top just scroll a page just a bit . for more i added data-btm-anchor="destroy:bottom" else your settings .
for bottom anchor you just have to add a div
<div id="destroy">
finsihed
</div>
better this id you used in footer or use footer id if you want sticky have to move until end of page else anything you like hope you understand .
The bug has been fixed in the 6.2.2 update of foundation for sites
I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
I want to show my columns like this
Code
<div class="row">
<div id="id-orders-stats" class="col-md-6 col-sm-6">
</div>
<div class="col-md-6 col-sm-6 stats-box">
<div id="id-time-tab">
<ul class="nav nav-pills nav-justified nav-prima">
<li>Daily
</li>
<li>Weekly
</li>
<li>Monthly
</li>
<li class="active">Quarterly
</li>
<li>Yearly
</li>
</ul>
</div>
<div id="id-sales-pie">
</div>
</div>
</div>
<div class="row">
<div id="id-channel-stats" class="col-md-6 col-sm-6 stats-box ">
</div>
<div class="col-md-6 col-sm-6 stats-box">
<div id="id-sales-line">
</div>
</div>
</div>
How do i achieve this?
I have looked at javascript solutions and a css solution as well but it isn't working. Kindly help
Problem 1 - Container element: The #3 and #4 widgets are in a separate row from the #1 and #2 widgets. The css for the .row class will clear the floats from the previous row creating the whitespace that you are observing.
Solution: Place all your widgets in the same containing element.
Problem 2 - Floats: You are likely to still have vertical whitespace issues due to the variable heights of your widgets and the way the floats are rendered in the document flow.
Solution 1: Use CSS Columns and have your widget pairs re-flow vertically
Solution 2: Use Javascript to layout your widgets. Something like Masonry.
It's very simple. Bootstrap works with a grid that is divided in 12. You want your first column to be half of the page, that means you do it like this:
<div class="col-md-6"></div>
The other two items both take up a quarter of the page, so you add the class:
<div class="col-md-3"></div>
You can find all of this on the Bootstrap homepage.
Here's a fiddle for your solution: http://jsfiddle.net/zkreewdt/
Edit By bundeling the first two divs (1 and 2) in a row it means that the row will take the height of the biggest element and that the row beneath it will be automaticly aligned. I updated the fiddle. please check it
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
Update:
JSFiddle:
http://jsfiddle.net/pcRKv/1/
I have read through a ton of posts and articles discussing z-indexing in IE7, but I just can't seem to come up with a solution for my problem.
I have a rotating banner that uses jQuery and CSS to fade to the next banner image in the list. I use z-index to make the last banner fade into the next banner. I created the HTML structure to easily break down without CSS. I'd like to have the .banner_thumb's sit on top of all the elements in the banner and float next to each other. It turns out that it works in all other browsers but IE7- ...in IE7 the thumbs sit on top of each other instead of floating next to one another. Any idea on how to fix this?
Here is my css:
http://pastebin.com/32GxamMg
HTML:
<div class="span-25 last" id="banner">
<h2>University Features</h2>
<ul>
<li class="selected">
<div class="banner_description">
<h3>xxxx</h3>
<p>body</p>
</div>
<img class="banner_img" src="" />
<img class="banner_thumb" src="" />
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>