I have a bootstrap breadcrumb element with a page header on the same row which works fine on large monitors but on mobile the header covers the breadcrumb. How do I force the header to a new row for smaller screens?
<div class="card">
<div class="card-body d-lg-flex align-items-center">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
<div class="align-self-end align-self-md-center center-y">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
You can use Bootstrap's grid system to force the header to a new row on smaller screens. One way to achieve this is to wrap the breadcrumb and the header in separate div elements with the class of row, and then give each div a class of col-lg-* and col-md-* for the larger screens and col-* for smaller screens. For example:
<div class="card">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
</div>
This way on larger screens the breadcrumb and header will be on the same line, but on smaller screens the header will be on a new row, thus avoiding the overlap.
Related
I have a sticky top-bar, ie something like:
<div id="main-navigation" class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<strong>My Brand</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
And now I have a row that I want to stick to it, but it does not work properly (it sticks to the top of the page when I scroll):
<div class="filter-row row" data-sticky-container>
<div class="sticky column expanded" data-sticky data-top-anchor="main-navigation:bottom">
</div>
</div>
P.S.: the main-navigation sticks properly.
I have an app that I'm building with Bootstrap 4. I need to center some icons underneath an image. I have a Bootply here. My code looks like this:
<div class="container">
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-3">
<img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
<br>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-twitter"></i></li>
<li class="list-inline-item"><i class="fa fa-google-plus"></i></li>
<li class="list-inline-item"><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-9">
<div><strong>Bill Gates</strong></div>
<p>
Here is some information about Bill Gates.
</p>
</div>
</div>
</div>
</div>
</div>
My question is, how do I horizontally center the three icons underneath my image so that it looks like a centered toolbar?
On your UL tag, remove the inline-list class, it's enforcing a float.
Hello I want to achieve the following design, but it has to be responsive (I am using bootstrap):
I used the following HTML5 tags
<div class="row">
<div class="logo visible-md visible-xs visible-sm visible-lg col-md-2 col-xs-2 col-sm-2 col-lg-2">
<img src="/images/logo.png">
</div>
<div class="pull-right">
<img src="/images/Banner.png" class="img-responsive">
</div>
<div style="clear: both"></div>
</div>
<br>
<div id="nav" class="navbar" style="width:90%">
<ul class="nav navbar-nav">
<li>home</li>
<li>test dp</li>
</ul>
</div>
The problem is when re-sizing the browser (i.e. opening from mobile device or re-sizing the browser size ), the image Banner.png change place and is not aligned anymore with the blue navbar
Edit 1:
I have used Absolute Positioning and added the code here, it works fine but is not stable (i.e. produces the space between the image and the navbar is not the same when I resize the browser with different sizes)
https://jsfiddle.net/c45xqLe9/
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>