I wrote a bootstrap form which looks good in desktop view.
I want to change the controls to take the whole width in the tablet and mobile view and the label aligned left:
i wrote a media query but it is not doing anything.
Any guidance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.control-label{
padding-top:0px !important;
}
.longselect{
max-width:550px;
}
.search_box{
max-width:450px;
}
.ddlyear,.ddlmonth{
max-width:100px;
}
.ddl_year{
max-width:150px;
}
.lblddlmonth{
max-width:65px;
}
.btn_search{
margin-right:20px;
}
.div_label{
text-align:right;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.col-xs-12.div_label{
text-align:left !important;
}
}
</style>
</head>
<body>
<div class="searchbox">
<div class="container">
<div class="search_row row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-12 col-xs-12 div_label">
<label for="txtSearch">Search term(s):</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<input name="ctl00$ctl27$g_5ae23328_0351_4b1c_aed3_5844c87daeaa$ctl00$txtTitle" type="text" maxlength="50" id="ctl00_ctl27_g_5ae23328_0351_4b1c_aed3_5844c87daeaa_ctl00_txtTitle" class="form-control input-sm search_box" > </div>
</div>
</div>
<div class="row year_row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-12 col-xs-12 div_label">
<label for="ddl_year">Year:</label>
</div>
<div class="col-md-3 col-sm-12 col-xs-12 ddl_year">
<select class="form-control input-sm ddlyear" id="ddl_year">
<option>All</option>
<option>2015</option>
</select>
</div>
<div class="col-md-3 col-sm-12 col-xs-12 div_label lblddlmonth">
<label for="ddl_month">Month:</label>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<select class="form-control input-sm ddlmonth" id="ddl_month">
<option>All</option>
<option>Janauary</option>
<option>Feberuary</option>
</select>
</div>
</div>
</div>
<div class="row atoz_row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-12 col-xs-12 div_label">
<label for="ddl_atoztopics">A-Z Topic:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<select class="form-control input-sm longselect" id="ddl_atoztopics">
<option>This is atest</option>
<option>This is atest</option>
<option>This is atest</option>
</select>
</div>
</div>
</div>
<div class="row orgunit_row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-12 col-xs-12 div_label">
<label for="ddl_orgunit">Organizational Unit:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<select class="form-control input-sm longselect" id="ddl_orgunit">
<option>This is atest</option>
<option>This is atest</option>
<option>This is atest</option>
</select>
</div>
</div>
</div>
<div class="row spotlights_row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-6 col-xs-6 div_label">
<label for="chk_spotlights">Include Spotlights:</label>
</div>
<div class="col-md-9 col-sm-6 col-xs-6">
<input id="chk_spotlights" type="checkbox">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-md-3 col-sm-0 col-xs-0 text-right">
</div>
<div class="col-md-9 col-sm-12 col-xs-12 text-left">
<button class="btn btn-default btn_search">Search</button>
<button class="btn btn-default">Reset</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I new in bootstrap.
I using bootstrap4 responsive UI : col-lg-x col-md-x col-xs-x col-sm-x.
When I view in Desktop screen, the address look nicely arrange.
When I view in mobile view ( shorten the browser width ), I notice that the address 1,2,3,4 separate by other fields which cause look not nice.
The correct arrangement for mobile view is
Address 1
Address 2
Address 3
Address 4
Postcode
Town
State
Here the code.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<div>
<p class="textfield-label">Postcode<span style="color:Red">*</span></p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 2 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Town<span style="color:Red">*</span></p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 3 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<div>
<p class="textfield-label">State<span style="color:Red">*</span></p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<select name="State" id="State" class="form-control js-select mandatory" disabled>
<option value="">Please select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 4 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
Anyone can guide me to solve my implementation?
Thanks you
I solved it for you. i implemented an upper row as the main parent and divided your inputs into 2 columns. then protected its row-col design inside. good luck
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 2 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 3 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Address Line 4 </p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<div>
<p class="textfield-label">Postcode<span style="color:Red">*</span></p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<p class="textfield-label">Town<span style="color:Red">*</span></p>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
<div>
<p class="textfield-label">State<span style="color:Red">*</span></p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
<select name="State" id="State" class="form-control js-select mandatory" disabled>
<option value="">Please select</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
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 an "form-inline" with a label and two div. The problem is that the second div is appearing before the first div:
.fullWidth {
width: 100% !important
}
<form class= "form-inline" role="form" id="showTestForm">
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-success">
<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-2 col-md-12 col-sm-12 col-xs-12" for="addFromDate">From:</label>
<div class="input-group date text-left col-lg-4 col-md-4 col-sm-12 col-xs-12" id="datepicker1">
<input type="text" class="form-control" id="addFromDate" name="addFromDate" placeholder="DD/MM/YYYY">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="text-right col-lg-3 col-md-2 col-sm-12 col-xs-12">
<input class="fullWidth" type="text" id="addFromTime" name="addFromTime" placeholder="24 Hr">
</div>
</div>
</div>
</div>
</form>
Do you have any other JS or CSS going on? It seems to be working as expected.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form class= "form-inline" role="form" id="showTestForm">
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-success">
<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-2 col-md-12 col-sm-12 col-xs-12" for="addFromDate">From:</label>
<div class="input-group date text-left col-lg-4 col-md-4 col-sm-12 col-xs-12" id="datepicker1">
<input type="text" class="form-control" id="addFromDate" name="addFromDate" placeholder="DD/MM/YYYY">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="text-right col-lg-3 col-md-2 col-sm-12 col-xs-12">
<input class="fullWidth" type="text" id="addFromTime" name="addFromTime" placeholder="24 Hr">
</div>
</div>
</div>
</div>
</form>
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>