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:

@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>

Open in new window


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>

Open in new window

LVL 11
Robb HillSenior .Net DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
First let me notice that in your body the form is not within a container (nor ina row nor in a column). The correct bootstrap structure is
 
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:

<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<h3 style="width: 100%; text-align: center;">Archived Work Queue Records</h3>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<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>
		</div>
	</div>
</div>

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
Robb HillSenior .Net DeveloperAuthor Commented:
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.
Robb HillSenior .Net DeveloperAuthor Commented:
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.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Marco GasiFreelancerCommented:
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.
Robb HillSenior .Net DeveloperAuthor Commented:
This is on an internal website..no way to link for you.

Will this approach you suggest keep me responsive?
Marco GasiFreelancerCommented:
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 :-)
Robb HillSenior .Net DeveloperAuthor Commented:
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 -->
Marco GasiFreelancerCommented:
Try this replacing #000 with the desired color. Adapt padding value to give the desired height to the element. And, as I said in my comment ID 40859255, replace inline styles with a class.

<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;background:#000;;padding: 20px auto;">Archived Work Queue Records</h3>
        </div>
    </div>
</div><!-- /.container-fluid -->

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.