I am having issues with my Col-xs and my col-md.
So before I continue ill explain my use.
Im Trying to create a user Form where they can enter their details and then enter a quantity for a piece of furniture. The furniture section is within a Tab-Content as there are separate sections within a house.
So id like for col-xs to span 2 columns, a column for label and one for the Quantity input, And then ill slowly increase by 2 columns, so sm will display, label, quantity, label quantity, and so on.
The col-sm and col-lg work Perfectly, but the col-xs and the col-md are not working, Its almost as if they are being skiped. Please help.
This is my code...
<div class="container">
<h3>Houseold Inventory</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Lounge</li>
<li>Dinning Room</li>
<li>Kitchen</li>
<li>Bed Room</li>
<li>Study</li>
<li>Garden</li>
<li>Domestic</li>
<li>Garage</li>
<li>Gym Equipment</li>
<li>Miscellaneous</li>
<li>Boxes</li>
<li>Extras</li>
</ul> <!-- nav-tabs END-->
<div class="tab-content">
<div class="tab-pane active" id="lounge">
<h4>Lounge</h4>
<form role="form" class="form-inline">
<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
</div><!--end row-->
</form>
<div>
</div> <!--tab-content end-->
</div> <!--tabbable end-->
<!-- col-sm-6 END-->
</div>
I am very new to Bootstrap and Web layout, but criticism is welcome.
ps. Please Excuse the Layout issues i cannot figure out why the Code insert is doing this
pps. Check this Similer question For layout example : Unanswered Question
ppss. Here is an image of my Mobile issue....
You were very close in your initial layout. Only issue I saw was you duplicated a couple col-md-* classes on some of your <div> elements:
<div class="form-group col-xs-6 col-sm-4 col-md-2col-md-3 col-lg-2"><label>4/S Couch</label></div>
Notice you have col-md-2col-md-3 in there? That's not going to work. Also, on some of your elements, your <label>'s parent has col-md-2 and the <input>'s parent has col-md-2, while others have col-md-3 and col-md-1. That's not uniform and causes issues in alignment. I assumed that col-md-3 and col-md-1 was correct (if I'm wrong you can always change it to col-md-2 and col-md-2) and edited your layout to the following:
<div class="container">
<h3>Houseold Inventory</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Lounge</li>
<li>Dinning Room</li>
<li>Kitchen</li>
<li>Bed Room</li>
<li>Study</li>
<li>Garden</li>
<li>Domestic</li>
<li>Garage</li>
<li>Gym Equipment</li>
<li>Miscellaneous</li>
<li>Boxes</li>
<li>Extras</li>
</ul> <!-- nav-tabs END-->
<div class="tab-content">
<div class="tab-pane active" id="lounge">
<h4>Lounge</h4>
<form role="form" class="form-inline">
<div class="row">
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Corner Piece</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end corner piece -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>4/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 4/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>3/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 3/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>2/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 2/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Armchairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end armchairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Recliner Chairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end recliner chairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Riempie Chairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end riempie chairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Sleeper Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end sleeper couch -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Coffee Table</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end coffee table -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Occ.Table</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end occ table -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hall Stand</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end hall stand -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hat Stand</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end hat stand -->
</div><!--end row-->
</form>
<div>
</div> <!--tab-content end-->
</div> <!--tabbable end-->
<!-- col-sm-6 END-->
</div>
</div>
</div>
See this Bootply Example to see this layout in action (just resize your browser).
Your structure is a bit off. It should be more like this:
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">Corner Piece</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
<!-- end corner piece -->
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">4/S Couch</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
<!-- end 4/S Couch -->
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">My Label</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
</form>
Take a look at this functioning example
HTH :)
I have figured it out.
Some how my Bootstrap css file was not being read correctly, once I installed the NuGet Package, all was good and well, now my xs and md are working perfectly and as expected.
Thanks everyone who helped.
Related
I have got a html form, designed with bootstrap classes. I would like to reduce the distance between the <label> (more pricesly the text) and the <input> element, as they are aranged horizontally at a breakpoint smaller than sm (576px).
The distance between "Anzahl" and the numeric input should be smaller.
This is my current code:
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
</div>
</div>
Just use in the label the class mb-0 that means margin-bottom: 0px; in your labels like this:
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label mb-0">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label mb-0">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
</div>
</div>
Also, you can use this class with different numbers 1-5 to specify any margin-bottom as you needed, see also this about the other helper classes like this:
https://getbootstrap.com/docs/4.6/utilities/spacing/
just zero out margin-bottom on the form-label class
.form-label{
margin-bottom:0!important;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value='<? echo date("Y-m-d"); ?>' required>
</div>
</div>
I have this row using horizontal form to show the label on the left side. On Mobile i want the label to occupy one row, and I want the 3 textboxes to remain on the same row, how to acheive this? They will stack on top of each other still
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
You can utilize the equal-width class .col:
<div class="form-group row">
<label for="dobDay" class="col-12 col-md col-form-label" />
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
</div>
You set col-12 on Date of Birth label so that it would occupy a row for extra small devices (less than 576px). Since other 3 columns are set with col, they will take up equal width on their own row. That would give you the col-sm-4 effect.
On medium devices and up, the Date of Birth label, with col-md, will join the equal-width group as well. That would give you the col-md-3 effect.
demo: https://jsfiddle.net/davidliang2008/yr5gp6kq/8/
That stacking was because you didn't mention breakpoints for xs devices.
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-xs-12 col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
I have just started using bootstrap. Eventually, I want to create a web page that will work on all form factors.
With this page, I am creating a form with 2 rows with 3 columns in each. When I make the view larger, the fields in the second and third columns get misaligned.
Does anyone have suggestions?
Here is my Jsfiddle, and here's the HTML:
<body>
<div class="container body-content">
<div class="container-fluid">
<form action="/Bills/AddBill" method="post">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div id="row1 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="User_Id:">User Id:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_Dt:">Bill Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Ship_Dt:">Ship Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
</div>
</div>
</div>
<div id="row2 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="SCAC:">SCAC:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Pro_Number:">Pro Number:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_of_Laden:">Bill of Laden:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
</div>
</div>
</div>
</form>
</div>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>
Here you go with a solution https://jsfiddle.net/va7mh47m/9/
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<form action="/Bills/AddBill" method="post">
<div id="row1" class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="User_Id:">User Id:</label>
<input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Bill_Dt:">Bill Dt:</label>
<input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Ship_Dt:">Ship Dt:</label>
<input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
</div>
</div>
</div>
<div id="row2 " class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="SCAC:">SCAC:</label>
<input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Pro_Number:">Pro Number:</label>
<input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Bill_of_Laden:">Bill of Laden:</label>
<input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
</div>
</div>
</div>
</form>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
This is mis-alignment came from form-group class margin-bottom: 15px css rule.
You can work with forms without this class if it's necessary or create your class for these form groups with margin-bottom: 0
Also I propose to set 100% width for input or use bootstrap class form-control to avoid columns overlapping.
P.S. Check the form-horizontal helpers class maybe it will be more useful for you. I slightly changed your example with form-horizontal JSFiddle
i have a html tab tag that i want to customize i want this tab to have blue text so it stands out from the other tags that have black texts. how do i do that i tried several thing like style="color: ....etc inside the tag. i also put a new little css method in the todc-bootsrap.min.css but i cant put class="new css method name" here. i saw this which bolds a heading when clicked on
.nav-tabs > li > a {
color: #666;
border-radius: 2px 2px 0 0;
}
i also see this which turns them all to a color which i may need just need to rename it something unique to i can apply it to only that tab
.nav-tabs > li > a {
color: #666;
border-radius: 2px 2px 0 0;
}
this is the code in full
Requisitioner
Requisition Date
Required Date
Buyer
<div class="form-group">
<label>Vendor</label>
<input value="{{req.vendor.vendorName}}" class="form-control" type="text" readonly="readonly" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Total</label>
<input value="{{req.amount | currency}}" class="form-control" type="text" readonly="readonly" />
</div>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="form-group">
<label>Description</label>
<textarea rows="8" value="" class="form-control" type="text" readonly="readonly">{{req.description}}</textarea>
</div>
</div>
</div>
<div class="form-group">
<br />
<label ng-show="req.bidWaiverCheck"><b><mark>*This requisition has a bid waiver tab*</mark></b></label>
</div>
</div>
</tab>
<tab heading="Items">
<div class="hide-xs hide-sm col-md-12 col-lg-12">
<div class="row">
<!--Added the Account Number field -->
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> Item #</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> PO Price</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> Quantity</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> UOM</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> Est. Price</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> Account Number</div>
<div class=" col-xs-12 col-sm-12 col-md-3 text-right"> Description</div>
</div>
<div class="panel panel-default" ng-repeat="item in req.items">
<div class="panel-body">
<!--Added the Account Number field -->
<div class=" col-xs-12 col-sm-12 col-md-1 text-left"> {{item.itemNumber}}</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-left"> {{item.poPrice | currency}}</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-left"> {{item.quantity}}</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-center"> {{item.UOM}}</div>
<div class=" col-xs-12 col-sm-12 col-md-1 text-right"> {{item.total | currency}}</div>
<div class=" col-xs-12 col-sm-12 col-md-2 text-left"> {{item.accountNumber}}</div>
<div class=" col-xs-12 col-sm-12 col-md-5 text-right"> {{item.description}}</div>
</div>
</div>
</div>
</tab>
<tab class="nav-tabss newclass" ng-show="req.bidWaiverCheck" heading="Bid Waiver" >
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="form-group">
<label>Requisitioner</label>
<input value="{{req.requisitioner.fullName}}" class="form-control" type="text" readonly="readonly" />
</div>
<div class="form-group">
<label>Buyer</label>
<input value="{{req.buyer.fullName}}" class="form-control" type="text" readonly="readonly" />
</div>
<div class="form-group">
<label>Requisition Number</label>
<input value="{{req.requisitionNumber}}" class="form-control" type="text" readonly="readonly" />
</div>
<div class="form-group">
<label>P.O. Number</label>
<input value="{{req.poNumber}}" class="form-control" type="text" readonly="readonly" />
</div>
<div class="form-group">
<label>Total Value</label>
<input value="{{req.amount | currency}}" class="form-control" type="text" readonly="readonly" />
</div>
<div class="form-group">
<label>Reason Code and Description</label>
<textarea class="form-control" rows="4" value="" type="text" readonly="readonly">{{req.reasonCode}} </textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="form-group">
<label>Vendor & Vendor ID</label>
<input value="{{req.vendor.vendorName }} ({{req.vendorID}})" class="form-control" type="text" readonly="readonly" />
</div>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="form-group">
<label>Vendor Address</label>
<input value="{{req.vendorAddress}}" class="form-control" type="text" readonly="readonly" />
</div>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="form-group">
<input value="{{req.vendorCity}}, {{req.vendorState}} {{req.vendorZip}}" class="form-control" type="text" readonly="readonly" />
</div>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="form-group">
<label>Items</label>
<textarea rows="5" class="form-control" ng-repeat="item in req.items" type="text" readonly="readonly">{{item.description}}</textarea>
</div>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="form-group">
<label>Justifications</label>
<textarea rows="5" value="" class="form-control" type="text" readonly="readonly">{{req.justification}}</textarea>
</div>
</div>
</div>
</div>
<!--<approvals parent-object="req"></approvals>-->
</tab>
<tab heading="Documents">
<documents parent-object="capitalRequest"></documents>
</tab>
<tab heading="Approvals">
<approvals parent-object="req"></approvals>
</tab>
add a class to the element
<tab class="nav-tabss blue" ng-show="req.bidWaiverCheck" heading="Bid Waiver" >
in your css call the class
.blue{color: blue !important;}
See fiddle: http://jsfiddle.net/mm6ck3dc/15/
I am not quite sure what you are trying to target however just move the "blue" class to whichever tab you want.
I am trying to create a form with bootstrap where I am trying to fill two fields in two column of same row and third field in another row with same width as above row. but some how the third field is not occupying the entire row width as the above field.
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
<br>
<form>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
<label>Name</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
<label>Phone</label>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">
<label>Email</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-8">
<input type="email">
</div>
</div>
</div>
</div>
Here is my jsfiddle
I am trying to display name and phone fields on same row, where as email to take up the entire row below name and phone fields. but email field is not taking the entire row.
I think you're trying to do this.
#media (min-width: 767px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
</br>
<form id="soForm" name="soForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="phone" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" />
</div>
</div>
</form>
</div>