I want to have a inline bootstrap 4 form occupying the full width (without spaces between the inputs and the button) with:
1 input type text and 1 button In extra small devices
2 input type text and 1 buttons In small devices
3 input type text and 1 buttons In medium and larger devices
But it is not working with the code below. I dont know if it is because the place where the form opens and close. Here is the example:
https://jsfiddle.net/o8jzq00f/1/
Html:
<div class="container-fluid bg-success">
<div class="row no-gutters justify-content-center" style="background-color: orange">
<div class="col-xs-12">
<h1 class="m-3">Title</h1>
</div>
</div>
<div class="row no-gutters justify-content-center">
<form>
<div class="col-xs-10 col-sm-4 col-md-3">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-xs-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-md-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-xs-2 col-sm-4 col-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
Use row class to bind your column then it will work
<div class="row">...under this you can use col classes and specify the width ...</div>
Related
I'm using Bootstrap 4.0 beta 2 and try to align label and form control horizontal in one line by using form-row and col-* classes.
Now I'm trying to align two of these form-row structs in one line, see fiddle (use HD resolution when running). But I don't know why the first input in first row is not vertically aligned with input field of second row. I've struggled for some hours now and using different classes form-inline, row, and so one and tried to play with margin and padding classes, but no luck.
The DOM cannot be changed, only the classes applied. Who can help me?
The problem is that your first column additionally has form-row on it, creating a row inside another row. There should never be a row inside a row; only use columns inside of rows. These rows add additional padding (15px for row, and 5px for form-row), which interferes with the percentage-based widths and offsets when you nest them.
Instead of nesting your second label + div inside of a new form-row, you need to take it out of its form-row, and place it inside of the form-row of the first label + div. After this, you'll need to adjust the col-md counts of both label+ div combinations to suit.
I've gone with 2 and 3 respectively, as that comes to a grand total of 10 ((2 + 3) + (2 + 3)), which equals the total of your second row (2 + 8).
I've created a fiddle showcasing this here, and you can also see this by maximising the snippet below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset>
<div class="form-row">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
Hope this helps! :)
CSS Only Solution:
Assuming you can't modify the DOM, you can always fall back to CSS:
.form-row.mt-2 {
width: 100%;
}
#media screen and (min-width: 768px) {
.form-row.mt-2>div {
padding-left: 4px;
padding-right: 13px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<fieldset>
<div class="form-row">
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
Though again, the DOM modification would be the more preferable solution :)
Check the snippet.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<form class="col-12">
<div class="form-row">
<div class="col-md-6 col-12">
<div class="form-row">
<label class="col-form-label col-md-4 col-12">LABEL</label>
<div class="col-md-8 col-12">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-row">
<label class="col-form-label col-md-4 col-12">LABEL</label>
<div class="col-md-8 col-12">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-row align-items-center mt-2">
<label class="col-form-label col-md-2 col-12">LABEL</label>
<div class="col-md-10 col-12">
<input type="text" class="form-control">
</div>
</div>
</form>
I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->
Hello friends the textbox is working fine when the size is large, medium and small, but when I the textbox in extra small sized device then it is getting cut. Following is the code for my text field. Please help me out with this, every help is highly appreciated. Thanks in advance
<div class="form-group">
<div class="col-sm-6 col-lg-6 col-md-6 col-xs-12">
<label for="inputEmail" class="col-sm-6 col-lg-3 col-xs-12 col-md-3 control-label" style="">Anything</label>
<div class="col-sm-12 col-lg-9 col-xs-12 col-md-9">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-6">
<label for="inputEmail" class="control-label" style="">per</label>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<button type="button" class="btn btn-default tax_percentage active" > month </button>
<button type="button" class="btn btn-default tax_flat"> year </button>
<input type='hidden' id='month_year_button' name='month_year_button' />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-6">
<p>How much will spend on office rent?</p>
</div>
</div>
</div>
you should decrease the size of the column for xs so that they all fit in a single row.
<div class="col-sm-6 col-lg-6 col-md-6 col-xs-8">
<label for="inputEmail" class="col-sm-6 col-lg-3 col-xs-4 col-md-3 control-label" style="">Anything</label>
<div class="col-sm-12 col-lg-9 col-xs-8 col-md-9 input-sm">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
hope this works for you.
I was trying to embeds three different forms in a single horizontal row.
The first(shop), second(locality) and third(search) form element should occupy 50%,30% and 20% (6,4 and 2 bootstrap col unit) of total horizontal row.
In mobile view, each three form element should be adjust in individual row.
I tried following:
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-md-6">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-md-4">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
Is this the correct approach?
Should I use bootstrap inline form for this purpose?
I tried using inline form, but its difficult to set width of each form elements.
You are correct you just need to adjust for small screens with col-xs-12 & change md to sm.. xs is mobile...
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-sm-6 col-xs-12">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-sm-4 col-xs-12">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-sm-2 col-xs-12">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
You have to specify a small (col-sm-*) width for each one. Edit like another answer col-xs for extra-small screens.
<div class="col-md-6 col-sm-12">
<div class="col-md-4 col-sm-12">
<div class="col-md-2 col-sm-12">
Assume we have two rows:
1 Row with col-md-12
1 Row with 2 divs, each of col-md-6
In the first row, I have Label/Textbox in a form-horizontal way. An example is shown below.
My question is, does the div with class form-group give me a row of width 12 columns? How to align content when I have rows including columns of different width? For instance, I need to align the sub button to be aligned with the Textbox, not the Label.
I am realizing that when I use a div.form-group, then I get the chance to have new 12 columns, even though the div.form-group is inside a div.col-md-6. Is this correct?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-11 col-md-6">
<div class="form-group">
<label for="txtFirstName" class="control-label col-md-3 col-xs-3">First Name</label>
<div class="col-md-7 col-xs-8">
<input type="text" class="form-control" id="txtFirstName">
</div>
</div>
</div>
<div class="col-xs-11 col-md-6">
<div class="form-group">
<label for="txtLastName" class="control-label col-md-3 col-xs-3">Last Name</label>
<div class="col-md-7 col-xs-8">
<input type="text" class="form-control" id="txtLastName">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-11 col-md-6">
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
you will have to use class 'row' to make it into col-6 div.
<div class="col-xs-11 col-md-6">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3">
<label for="txtFirstName" class="control-label">First Name</label>
</div>
<div class="col-md-7 col-xs-8">
<input type="text" class="form-control" id="txtFirstName">
</div>
</div>
</div>
</div>
Check http://getbootstrap.com/css/ , Nesting columns section