Bootstrap a header/title
I have a boostrapped website that has a topnavbar and a sidemenu..and a body.
Inside the body I have pages that are rendered..each will have their own title.
I would like there to be bar at the top of each body page that has a background color...and centers this title text..and remains boostrapped.
I am pasting my navbar just so you can see the dimensions on it. Essentially the title bar will live on the body page but should be same dimenisions and the ability to have a background color the same.
my topnavbar:
this is the page with the title bar that does not exist yet. Where the text <h3>Archived Work Queue Records</h3> ..this is what I would like to have as its own section...with a background..and just center the text. and keep it responsive.
Inside the body I have pages that are rendered..each will have their own title.
I would like there to be bar at the top of each body page that has a background color...and centers this title text..and remains boostrapped.
I am pasting my navbar just so you can see the dimensions on it. Essentially the title bar will live on the body page but should be same dimenisions and the ability to have a background color the same.
my topnavbar:
@using CASH.Web.Common
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">Welcome to CASH.</span>
</li>
<li class="divider"></li>
<li>
<label style="color: white; font-size: small; font-weight: bold; margin-right: 5px; cursor: default;">
Version @(Helper.SessionRead<string>("Version"))
</label>
</li>
<li class="divider"></li>
<li>
@Helper.SessionReadString("UserName")
</li>
<li class="divider"></li>
@*<li>
<img style="margin-left:5px;" src="@Url.Content("~/Content/Images/logo-w "/>
</li>*@
</ul>
</nav>
</div>this is the page with the title bar that does not exist yet. Where the text <h3>Archived Work Queue Records</h3> ..this is what I would like to have as its own section...with a background..and just center the text. and keep it responsive.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h3>Archived Work Queue Records</h3>
</div>
</div><!-- /.container-fluid -->
</nav>
<form class="form-horizontal" name="searchForm">
<fieldset>
<legend></legend>
<div class="form-group">
<label for="policyNumber" class="col-sm-2 control-label">Policy Number</label>
<div class="col-sm-10">
<input type="text" id="policyNumber" name="policyNumber" class="form-control" ng-model="searchCriteria.policyNumber" />
</div>
</div>
<div class="form-group">
<label for="partner" class="col-sm-2 control-label">Partner</label>
<div class="col-sm-10">
<select name="partner" id="partner" class="form-control" ng-model="searchCriteria.partnerId" ng-options="partner.id as partner.name for partner in partners"></select>
</div>
</div>
<div class="form-group">
<label for="state" class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<select name="state" id="state" class="form-control" ng-model="searchCriteria.state" ng-options="state.name as state.name for state in states"></select>
</div>
</div>
<div class="form-group" show-errors>
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select name="assignee" id="assignee" class="form-control" ng-model="searchCriteria.assigneeId" ng-options="assignee.id as assignee.fullName for assignee in assignees"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span><button class="btn btn-primary" ng-click="search()">Search</button></span>
<span><button class="btn btn-default" ng-click="clear()">Cancel</button></span>
</div>
</div>
</fieldset>
</form>
<h4 ng-show="resultData.pager" ng-class="{'bg-success' : resultData.pager.recordCount > 0, 'bg-warning' : resultData.pager.recordCount == 0}">
<span ng-show="resultData.pager.recordCount > 0">{{ resultData.pager.recordCount | number:0 }} records found</span>
<span ng-show="resultData.pager.recordCount == 0">No records meet your search criteria</span>
</h4>
<div>
<table class="table table-striped table-hover" ng-show="resultData.responses.length > 0">
<thead>
<tr>
<th>Policy Number</th>
<th>Partner</th>
<th>State</th>
<th>User</th>
<th class="button-column"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">
<span ng-show="pagerCapacity < pageNumber">
<button type="button" class="btn btn-default btn-xs glyphicon glyphicon-backward"
ng-click="back()"></button>
</span>
<span ng-repeat="n in [minPageNumber, maxPageNumber] | range">
<button type="button" class="btn btn-xs"
ng-class="{'btn-primary' : n == pageNumber, 'btn-default' : n != pageNumber}"
ng-click="page(n)">
{{n}}
</button>
</span>
<span ng-show="maxPageNumber < resultData.pager.pageCount">
<button type="button" class="btn btn-default btn-xs glyphicon glyphicon-forward"
ng-click="forward()"></button>
</span>
</td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="record in resultData.responses">
<td>{{ record.policyNumber }}</td>
<td>{{ record.partner }}</td>
<td>{{ record.state }}</td>
<td>{{ record.assignee }}</td>
<td><button type="button" class="btn btn-default btn-xs grid-button" ng-click="showWorkQueueItem(record)">View</button></td>
</tr>
</tbody>
</table>
<br /><br />
</div>ASKER
Thank you - I am also trying to make this row in which the title is appear on the page as a solid bar...so with a backround color. So its the same size hight and width as the real nav bar above it.
ASKER
my container is actually inherited from a view on a layout page in mvc but thank you for pointing that out.
I also need to format the controls on this page more properly as well.
I also need to format the controls on this page more properly as well.
To exactly size your title just look at navbar dimensions and use them to style your h3, you can also use padding properties.
Use Chrome Developer Tools if you use Chrome, or Firebug for Firefox or Developer Tools for IE: you can invetigate everything about your DOM elements and learn a lot about them.
If you can provide a live link to see your page, I can be more precise (developer tools let you experiment in real time with your page to try some style rule: an indispensable tool indeed).
I can imagine something like this:
h3.body-title{
width: 100%;
text-align: center;
background: #000; //set your color here
padding: 20px auto; // the bar will have height 40px + text height
}
Give it a try and play with values to find your way. If you'll provide a live link I'll be happy to help you with a more precise code.
Use Chrome Developer Tools if you use Chrome, or Firebug for Firefox or Developer Tools for IE: you can invetigate everything about your DOM elements and learn a lot about them.
If you can provide a live link to see your page, I can be more precise (developer tools let you experiment in real time with your page to try some style rule: an indispensable tool indeed).
I can imagine something like this:
h3.body-title{
width: 100%;
text-align: center;
background: #000; //set your color here
padding: 20px auto; // the bar will have height 40px + text height
}
Give it a try and play with values to find your way. If you'll provide a live link I'll be happy to help you with a more precise code.
ASKER
This is on an internal website..no way to link for you.
Will this approach you suggest keep me responsive?
Will this approach you suggest keep me responsive?
It's a standard Bootstrap structure: aabsolutely responsive. But you donìt have to trust me: just try the trick in one page and see it with your eyes :-)
ASKER
I am using boostrap 3.0.
So far I refactored your code like so..but am trying to get background in now.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<h3 style="width: 100%; text-align: center;">Archived Work Queue Records</h3>
</div>
</div>
</div><!-- /.container-fluid -->
So far I refactored your code like so..but am trying to get background in now.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<h3 style="width: 100%; text-align: center;">Archived Work Queue Records</h3>
</div>
</div>
</div><!-- /.container-fluid -->
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
container
row
col
col
...
Second, I'm wondering why you're using a navbar to put a title at the top of your body. I would try something like this:
Open in new window
I put styles inline just to make you see how to get the text center aligned: you should create a class with those rules and give the class to that h3 element.Hope this helps