I have the following HTML code using Bootstrap 3 CSS classes :
<h4>Profile</h4>
<div class="row form-group col-sm-8">
<label class="col-sm-2 control-label">Name :</label>
<div class="col-sm-6">
myName
</div>
</div>
<div class="row form-group col-sm-8">
<label class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8">
me#internet.org
</div>
</div>
<h4>Credits</h4>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Credits :</label>
<div class="col-sm-7">
42
</div>
</div>
I'd like the Credits <h4> title to be on a new line, under the previous fields. But it's displayed on the top right.
Can someone please explain me why and help me display it to the right position ?
CSS Fiddle : https://jsfiddle.net/DTcHh/
The problem is that the col- classes make the elements they are applied to floats. You will need to wrap them in a container with clearfix. You probably want this (note that row applies clearfix too):
<h4>Profile</h4>
<div class="row">
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Name :</label>
<div class="col-sm-6">
myName
</div>
</div>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8">
me#internet.org
</div>
</div>
</div>
<h4>Credits</h4>
<div class="form-group col-sm-8">
<label class="col-sm-2 control-label">Credits :</label>
<div class="col-sm-7">
42
</div>
</div>
You can create a new div with the class 'row' for the credits:
<div class="row">
<h4>Credits</h4>
</div>
Related
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>
This is my bootstrap that I need to behave like a table. I also need the header columns to behave like a sticky header on scroll. Is this possible with just bootstrap alone?
The reason I am not using an actual table is because this will go into a formly object and formly has an issue with tables
<div class="container">
<div class="row visible-md visible-lg">
<div class="form-group col-md-2">
<label>First Name</label>
</div>
<div class="form-group col-md-2">
<label>Last Name</label>
</div>
<div class="form-group col-md-2">
<label>Address</label>
</div>
<div class="form-group col-md-2">
<label>City</label>
</div>
<div class="form-group col-md-2">
<label>State</label>
</div>
<div class="form-group col-md-2">
<label>Zip Code</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
Jake
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Elwood
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
1060 W Addison St
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Chicago
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
IL
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
60613
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
John
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Wayne
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
18601 Airport Way
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Santa Ana
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
CA
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
92707
</div>
</div>
</div>
https://stackblitz.com/edit/angular-eyo4a8-gnrknm?file=app%2Fdatepicker-date-class-example.html
I found it just needed to use
class="sticky-top"
.sticky {
position: fixed;
top: 0;
width: 100%;
}
This sticky class is added to the navbar with JS when it reaches it's scroll position. Use this sticky code for the header columns that you needed to the add.
This is the issue
I need to prevent over-write rows using bootstrap 3. This is my code
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Salary</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.salaryDetails}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Recruiter</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="container col-md-4">
<label class="control-label">Type</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
I need set auto height in every rows by bootstrap 3.
You are overwriting the .row class with properties from the form-group class.
Change all of your input rows.
from
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
to
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
You can use the Bootstrap-Clearfix attribute.
https://v4-alpha.getbootstrap.com/utilities/clearfix/
I have a form that uses Bootstrap 3. My layout should follow the below:
On small screens, Display 1 input per row with the label stacked above the input
On medium devices, Display 2 input per row with the label to the left of each input
On large devices, Display 3 inputs per rom with the label to the left of each input
Rows that contain a textarea, should always be displayed with one input per row
I have this almost working with one small quirk. Everything works well with all of the elements lining up like the below on all bootstrap breakpoints up to md like this:
However, when I hit the lg breakpoint, the text area and it's label no longer line up with the other element like this:
Looking at the grid I've set up I can see why this happens but I cant seem to find a pattern that fits my needs without causing this issue. I know I can start hacking away with CSS like negative margins to force the layout but I feel like there is a better way.
How can I fix this?
Here is a jsFiddle showing the issue
And the relevant HTML:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-12 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-2 col-lg-2 left-on-mobile">
<label for="" class="control-label ">Textarea</label>
</div>
<div class="col-md-10 col-lg-10">
<textarea class="form-control form-input"></textarea>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
For the first Input field change the col-lg-* classes from 5 and 7 to 6 and 6. That will make its <label> tag to align with the one in the previous row.
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-6 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-6">
<input type="text" class="form-control">
</div>
</div>
</div>
Demo link here
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>