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.
Related
I have used field set that contains a set of input and labels. these inputs and label are outside the field set borders. How can I place label and inputs inside field set border.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
As you can see the input is outside the field set border. How can I fix this purely with HTML. I tried to setting the padding for the field set and works fine but at certain screen size the end of the label will be slightly hidden. So I wan to see first if can be resolved using just HTML. I am using bootstrap 3.3.7
Just remove the div class="row"> inside the form group perhaps? I gave it a lime border just to make it obvious.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid lime !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
create a parent div where you have to put a div with the form-group class than in the children you have to put form-control for example in your label and input
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="form-control">User:</legend>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-control">Username:</label>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
I'm not entirely sure what you're after, but part of your problem is that you're tangling rows and columns with form groups. The latter should really be inside the former. See getbootstrap.com/docs/3.3/css/#forms
Then, your layout seems overly complex. I've removed a few layers to simplify.
Also, you're applying too many column classes and in the wrong order. Bootstrap is mobile first and column classes cascade. Arrange them smallest to largest and don't duplicate any with the same numeric value.
.legend-custom {
font-size: 1.2em;
font-weight: bold;
}
.fieldset-custom {
border: 1px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-12 col-md-6">
<form class="form-horizontal">
<div class="row form-group">
<div class="col-xs-12 col-md-3">
<fieldset class="fieldset-custom">
<legend class="legend-custom">User:</legend>
<label class="control-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: 15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
#row-1 {
margin-right: 5px;
margin-left: 5px;
}
Add the above code to your css file.
Second row class which is like that <div class="row" id="row-1"> before tag <div class="form-group">
background image only appears in the first two columns not not in the background of the whole container. I have used the code below:
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
and css file is:
.bg{
background: url('bg.jpg');
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
.form-container{
border: 1px solid;
}
Use background-repeat: no-repeat; background-size: cover;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg">
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
</div>
</body>
</html>
Remove background-repeat: no-repeat; and add 100% height on body and html.
html,
body {
height: 100%;
}
.bg {
background: url('https://picsum.photos/100/100');
height: 100%;
width: 100%;
}
.form-container {
border: 1px solid;
}
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
Include background-size: cover
.bg {
background-image: url('https://via.placeholder.com/200x200');
background-size: cover;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
.form-container {
border: 1px solid;
}
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
I am having a bit of a styling problem in that I want my form elements to take up to available size when using the bootstrap grid system. In the code example here
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-sm-8">
<div class="row">
<div class="form-group col-sm-6">
<label for="Callsign">Callsign: VH-</label>
<input name="Callsign" />
</div>
<div class="form-group col-sm-6">
<label for="acType">Type:</label>
<input name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-2">
<label for="Description">Description:</label>
</div>
<div class="form-group col-sm-10">
<textarea name="Description"></textarea>
</div>
</div>
</div>
</div>
This is rendered like this
However I need it rendered like this
How can I achieve this?
Try with bootrap Class form-control
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-xs-8">
<div class="row">
<div class="form-group col-xs-3">
<label for="Callsign">Callsign: VH-</label>
</div>
<div class="form-group col-xs-4">
<input class="form-control" name="Callsign" />
</div>
<div class="form-group col-xs-1">
<label for="acType">Type:</label>
</div>
<div class="form-group col-xs-4">
<input class="form-control" name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<label for="Description">Description:</label>
</div>
<div class="form-group col-xs-8">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
</div>
</div>
</body>
Edited:
First you need to style the text-area with a width of 100%. There is a media query which is making the text-area go to a new line. If you can not remove that query you can add a new one to avoid the behaviour:
textarea {
width: 100%;
}
#media (max-width: 769px) {
.col-sm-10 {
width: 83.33333333%;
float: left;
}
.col-sm-2 {
width: 16.66666667%;
float: left;
}
.col-sm-6 {
width: 50%;
float: left;
}
}
textarea {
width: 100%;
}
#media (max-width: 769px) {
.col-sm-10 {
width: 83.33333333%;
float: left;
}
.col-sm-2 {
width: 16.66666667%;
float: left;
}
.col-sm-6 {
width: 50%;
float: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-sm-8">
<div class="row">
<div class="form-group col-sm-6">
<label for="Callsign">Callsign: VH-</label>
<input name="Callsign" />
</div>
<div class="form-group col-sm-6">
<label for="acType">Type:</label>
<input name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-2">
<label for="Description">Description:</label>
</div>
<div class="form-group col-sm-10">
<textarea name="Description"></textarea>
</div>
</div>
</div>
</div>
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>
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.