when I change the page,in the first page has bottom navbar and in the second page do not has bottom navbar.When I from the second page the first page ,the bottom navbar is show ,but has nothing
<div class="navbar navbar-app navbar-absolute-top" ui-yield-to="headNavigation"
ng-if='headNavigationShow' style="background: #C20404;padding-top:20px;height:65px;">
<div class="btn-group pull-left" ui-yield-to="leftHeadNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerHeadNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightHeadNavigation">
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom" ui-yield-to="footNavigation"
ng-if='footNavigationShow'>
<div class="btn-group pull-left" ui-yield-to="leftFootNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerFootNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightFootNavigation">
</div>
</div>
<!-- App Body -->
<div class="app-body">
<div class="app-content" style="margin-top:13px;">
<ng-view></ng-view>
</div>
</div>
this is the first page,it has the bottom navbar and has the menuthis is first page ,back from the second page ,the bottom navbar has nothing
the first page's bottom navbar has nothing ,because of the the bottom navbar has the.
<div ui-content-for="footNavigation" ng-if="$parent.headNavigationShow">
<footnavigation-directive info="{{foot_navigation_position}}"
</footnavigation-directive>
</div>
like this use ng-if to contol the load order.
Related
Using bootstrap, the content within the rows is breaking out into the ones above and below. How can I secure the content so that the styling rules apply as they should?
HTML
<div class="row home">
<div class="hero-unit">
<div class="container">
<div class="container hero-header">
<h2>Good lorem catchphrase, here</h2>
<p>This text should sit under the header above, but in mobile, it and the header and buttons within this row should be centered. </p>
<button type="button" class="btn btn-ghost pull-left">contact us</button>
<button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="row hero-family">
<div class="col-sm-12 col-md-6 col-lg-12">
<div class="container blurb">
<h1 class="header">All for the family</h1>
<p>This is just more filler text for this space in place of what will eventually go here. This should be centered above the people and button below, while the content above should not flow into this space when downsizing.The image below should maintain
its position at the bottom of the row and not come up when resizing either.</button>
</div>
</div>
</div>
<div class="row hero-family">
<div class="family-image"></div>
</div>
<div class="row we-can-help">
<div class="container">
<h1>We are here</h1>
<p>This content shouldn't break out of its row either, but still manages to. Not a good thing!</p>
</div>
</div>
JSFIDDLE: LINK
This is how it should look
Below 992px, it then starts looking like this:
Notice the image comes away from the bottom of its row and the collision of content between rows.
I currently have a VIEW button to the right of this layout but want to add another ADD button to the right.
You can see an example of this on https://www.fireworkscrazy.co.uk/store_v8/shopdisplayproducts.asp?id=5&cat=Barrages+%2F+Cakes+-+Single and then select the GRID VIEW icon
<div class="desktop_view product-view grid-list-row-view hide" style="">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="featured-prod-widget">
<div class="nailthumb">
[formatimage sub]
[CC_ADD_NEW_FLAG]
</div>
<div class="row product-details">
<div class="col-sm-12">
<h6 class="widget-product-title">[translate cname]</h6>
</div>
<div class="row"></div>
<div class="col-sm-12">
$ <span class="widget-prod-price">[FORMATCUSTOMERPRICE cprice]</span>
</div>
<div class="col-sm-12">
</div>
</div>
**<a href="[formatshopexdlink][add_websesslink]" class="submitbtn pull-left">
VIEW
</a>**
</div>
</div>
</div>
the style .grid-list-row-view .featured-prod-widget .submitbtn affecting your button. it has absolute position. so with same style if you create button with pull-left or pull-right , it will display on same position instead of left or right. you will need to implement some workaround to overcome or remove absolute style.
I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!
Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!
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;
}