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/
Related
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.
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I want to create a template for a project that i am working on using Bootstrap and i have a problem with the behavior of the offcanvas sidebar. I want the sidebar to take all the space below the header and to not be scrollable. I have found two templates, that combined do what i want but i have a problem merging them as i am not very good with css. I have tried a lot to do but i can't figure how to do it. Here is a picture showing the desired functionality/behavior of the template i want to make:
Here are the two templates i have found:
Dashboard
Dashboard (with off-canvas sidebar)
And here is the code (HTML+CSS) of each template (stripped down) so you can easily figure out how they work:
Dashboard - fixed sidebar
HTML
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: getbootstrap.com/examples/dashboard/dashboard.css
Dashboard (with off-canvas sidebar) - scrollable
HTML
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: http://textuploader.com/k6ae
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>
So what I'm trying to do is have my navbar automatically center to anything that's in it.
What I want is:
Logo all the way on the left (pulled left)
Button all the way on the right (pulled right)
Search bar directly in the center of the navbar
What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.
Here's my current code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
<div class="nav-collapse collapse">
<div class="span4 offset1">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
</form>
</div>
<ul class="nav pull-right">
<a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note:
The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.
Please help!
It should work as you've described, but that isn't what your code reflects.
Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).
you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/
.logo {
float:left;
}