Bootstrap 3.3.5
I'm trying to reduce the amount of spacing between rows:
Ive tried adding removing margins & padding on the row but doesnt seem to change anything:
<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;">
These are the possible solutions to remove the spacing but doesnt seem to work for me.
Here is the code:
<div class="container-fluid">
<div class="row" style=" border: solid 1px red; overflow: hidden; ">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Start Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left ">
<form class="form-horizontal">
<div class="form-group">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Inmate Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="row" style="">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Booked: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="book" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Out House: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="house" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
Update: 1
If I modify the row style to have the following:
style="margin-bottom: -10px !important; padding-bottom: -10px !important; margin-top: -10px !important; padding-top: -10px !important; outline: solid 1px green;"
The row is outline does move up but the space is still there
The issue is that there is a margin applied to .form-group. To override, add this to your CSS or change it in the CSS code for bootstrap.
.form-group {
margin-bottom: 0;
}
Demo: http://www.bootply.com/lKW7vRzS6d
Well, most likely when you're setting it to 0px, it's already at 0px. If you want to FORCE it to be smaller, supply negative values.
Related
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 intend to line up 4 input text boxes housed in 4 equal sized columns in one row of the form. Making use of Bootstrap's grid column classes, I assigned col--3 for medium and large screen sizes to those four input divs.
Likewise for small and extra small sizes, I assigned them col--12 so that the inputs occupy their own whole row. Then my guide wanted those input boxes sizes reduced. I added offset class to the four input and reduced their column span to 6 columns. These were centered appropriately.
However, this change screwed up my small screen layout. Now there are only two inputs in each row, while the other two in the next row.
/* button modification*/
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<form id="registration-form" class="">
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div>
<!-- </div>
-->
</form>
</body>
Here's the JSFiddle(Drag the frame) too. It seems the inputs(in each form group div) have completely positioned outside their bounding div box.The intended output should be the four inputs lined side by side in one row.
What can possibly be the issue here?
If your problem is, the offset is still in larger screens,You have to reverse the offsetting for each of the other col-classes .Give col-md-offset-0 to the divs where you specified offset for smaller device
/* button modification*/
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<form id="registration-form" class="">
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div>
<!-- </div>
-->
</form>
</body>
you have classes col-sm-offset-3 and col-xs-offset-3 these classes 'push' the columns with a number of 3 columns. so the inputs have margin-left equal to 3 column widths
see more here > http://getbootstrap.com/css/#grid-offsetting
remove those classes and everything will work ok
see here fiddle
or snippet below
/*Main box*/
div #ebook-registration-box
{
border: 2px solid #d3d3d3;
padding: 10px;
margin: 10px auto;
}
/* button modification*/
#button-wrapper
{
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button
{
margin: auto 0.5em;
}
.inner
{
margin: 0 auto 0 auto;
width: 150px;
padding: 0 ;
/* center the block element*/
}
/* fixed height for responsive images
(does not work)*/
img
{
min-width: 100%;
}
input
{
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem
{
border-radius: 0px;
}
/* */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ebook-registration-box" class="row">
<div class="col-md-12" >
<div id="registration-header" class="row">
<div class="col-md-12">
<p class="text-center">
Register to download the device launch guide
</p>
</div>
</div>
<!-- 4 form elements-->
<form id="registration-form" class="" >
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<!-- Download Button -->
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div> <!-- </div>-->
</form>
</div>
</div>
Is this what you were wanting? You just needed to disable the offset for the larger widths and make the offset smaller for xs widths.
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ebook-registration-box" class="row">
<div class="col-md-12" >
<div id="registration-header" class="row">
<div class="col-md-12">
<p class="text-center">
Register to download the device launch guide
</p>
</div>
</div>
<!-- 4 form elements-->
<form id="registration-form" class="" >
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div> <!-- </div>-->
</form>
</div>
</div>
You can also use "form-inline" class on <form> for horizontal form display.
I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.
The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.
Any direction on this issue would be very helpful.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
border: 2px solid blue;
}
h1{
margin: auto;
}
.body{
border: 2px solid blue;
margin-top: 10px;
}
.inline{
display: inline-block;
}
.no-margin{
margin: 0px;
}
label{
width: 140px;
margin-right: 5px;
text-align: left;
white-space: nowrap;
}
input{
margin-left: 0px;
margin-top: 10px;
}
.left_margin{
margin-top: 10px;
margin-left: 230px;
}
#media screen and (min-width: 768px){
label{
text-align: right;
}
input{
margin-left: 10px;
margin-top: 10px;
}
}
<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-inline" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The id must be unique.
col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6.
Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.
I guess you need to use the Horizontal form instead of the Inline form.
Place labels into <div class="form-group"></div> blocks.
Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
h1.lead {
margin: 0;
padding: 12px;
}
.body{
border: 2px solid blue;
margin-top: 10px;
padding-top: 12px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-horizontal .control-label {
display: block;
float: left;
margin-bottom: 0;
margin-right: 20px;
padding-top: 7px;
white-space: nowrap;
}
.form-horizontal .form-control {
width: 100%;
}
.fill-free-space {
overflow: hidden;
}
<div class="header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input_left_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_1" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_2" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_3" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_4" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_5" placeholder="Left">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input_right_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_1" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_2" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_3" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_4" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_5" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_6" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_6" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_7" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_7" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_8" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_8" placeholder="Right">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
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>