bootstrap 3.0 formatting

I have the following html file.  I would like to use this html file as an example of the best practices of boostrap 3.0.

Here is what I have so far.   I want to make sure everything is fluid, responsive...but I also want the controls to look good using boostrap.

For example a state field would be different than a description.

Can someone please style this up with boostrap showing me how to touch this up.  I will post my current code.

<style type="text/css">
    .form-control {
        display: inline-block;
        width: auto;
        font-weight: normal;
    }
</style>

<h3>View Archived Records</h3>
            <form class="form-horizontal" name="workQueueForm">
                <fieldset>
                    <legend></legend>

                    <div class="form-group" ng-show="errorMessage">
                        <p class="bg-danger">{{ errorMessage }}</p>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Policy Number</label>
                        <div class="col-sm-10">
                            <label id="policyNumber" name="policyNumber" class="form-control">{{ workQueue.policyNumber }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Carrier</label>
                        <div class="col-sm-10">
                            <label name="partner" id="partner" class="form-control">{{ workQueue.partner }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Line of Business</label>
                        <div class="col-sm-10">
                            <label name="policyForm" id="policyForm" class="form-control">{{ workQueue.policyForm }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">State</label>
                        <div class="col-sm-10">
                            <label name="state" id="state" class="form-control">{{ workQueue.state }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Work Queue Error</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.workQueueType }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.giA_ACP">
                        <label class="col-sm-2 control-label">GIA ACP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_ACP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.giA_ECP">
                        <label class="col-sm-2 control-label">GIA ECP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_ECP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.gfR_ACP">
                        <label class="col-sm-2 control-label">GFR ACP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_ACP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.gfR_ECP">
                        <label class="col-sm-2 control-label">GFR ECP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_ECP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.giA_Cat_ACP">
                        <label class="col-sm-2 control-label">GIA Catastrophic ACP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_Cat_ACP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.giA_Cat_ECP">
                        <label class="col-sm-2 control-label">GIA Catastrophic ECP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.giA_Cat_ECP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.gfR_Cat_ACP">
                        <label class="col-sm-2 control-label">GFR Catastrophic ACP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_Cat_ACP }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.gfR_Cat_ECP">
                        <label class="col-sm-2 control-label">GFR Catastrophic ECP</label>
                        <div class="col-sm-10">
                            <label name="queueType" id="queueType" class="form-control">{{ workQueue.gfR_Cat_ECP }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Record Date</label>
                        <div class="col-sm-10">
                            <label type="text" id="createDate" name="createDate" class="form-control">{{ workQueue.createDate | dateFormat }}</label>
                        </div>
                    </div>

                    <div class="form-group" ng-show="workQueue.notes && workQueue.notes.length!=0">
                        <label class="col-sm-2 control-label">Notes</label>
                        <div class="col-sm-10">
                            <label ng-repeat="note in workQueue.notes" class="form-control" style="height:auto">{{ note }}</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <span><button class="btn btn-default" ng-click="back()">Close</button></span>
                        </div>
                    </div>

                </fieldset>
            </form>

Open in new window



Here is what it looks like...This needs to be more form like...for example  state would be state abbreviations, assignned woudl be first and last names, Partner would be a complany name,  and policy number might be at max about 9 digits.

So other than this level of booostrapping ...anything else that boostrap does here or jquery/ jquery UI would be of great help.  I want to apply what I learn here to the 15 other pages I need to format.


Thanks

This pic is in desktop mode...so it clearly needs to look better:)
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.

Tom BeckCommented:
I don't have a suggestion yet for this, just some observations.

1.) All ids for elements on a page must be unique. You have multiple id="queueType".

2.) You have no inputs on your form. For example, this:
<label name="state" id="state" class="form-control">{{ workQueue.state }}</label>
Should be:
<input name="state" id="state" class="form-control" value="{{ workQueue.state }}" />
So the user can fill in a value, right?

3.) "This needs to be more form like"
When I load your markup into a browser, it looks like a form. You mentioned a "pic" at the end of the question. Maybe that would clarify what you mean.
Robb HillSenior .Net DeveloperAuthor Commented:
Well this is an angular spa....thats writting underneath MVC.

Either way....the approach for this layout is just boostrap, jquery, and normal html controls with angular directives.


I am only concerned about the best practice for bootstrapping a control..whether it be dropdown or label or text or whatever....on a page in a responsive manner.
Marco GasiFreelancerCommented:
bootstrapping a control..whether it be dropdown or label or text or whatever....on a page in a responsive manner
To make a form control responsive, first you have to put in a responsive container: for instance, you can use for ech control a column, to have the two controls per line but make them vertically layout in sm,all screen
<form>
	<div class="row">
		<div class="col-md-6 col-sm-6 col-xs-12">
			<label for="email">Email</label>
			<input id="email" type="text" placeholder="Email" />
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12">
			<label for="name">Name</label>
			<input id="name" type="text" placeholder="Name" />
		</div>
	</div>
</form>

Open in new window

This will make the two input will be horizontally aligned in large and medium screens and vertically aligned in small screens.

Another property you can play with is line-height to change the height of the controls accordingly to resolutions using media-queries; the same with the font, but it is generally not a good practice make the controls become smaller or bigger because this can create problems in readability. So the best way is to use the method described above.

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.