I have a form, in that n number of form fields available. only For 2 inputs, I want to share a common button without affecting remaining layout, but it's not aligned properly as common.
Here is what I tried. First two input fields should have common button
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
I assume that you want to center the button for two input elements. Is that so you can try display:table for the .row this might have fix your issue.
.row {
display: table;
width: 100%;
}
.row .col{
display: table-cell;
}
.col1 {
width: 40%;
}
.col2 {
position: relative;
vertical-align: top;
}
.col2 button {
position: absolute;
top: 30px;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col col1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col col2">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
</div>
</body>
</html>
However if you want to increase the size for the button you can always add padding or set height for the button.
Codepen link
Pure bootstrap 4 impementation wll be the one below.
You have to group the two inputs into one single .col and the button to an another .col with flex-grow-0 flex-shrink-1 mb-3 d-flex to shrink the container to the minimum of button width and to have sufficient margin at bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
</div>
col-auto in bootrap 4.0.0 does not have padding. And there may be some other bugs too. You should better use the latest version of bootstrap 4. it is version 4.6.0
Use two .row. The first .row for the first two inputs and the button and the second .row for the rest of the inputs.
Use .col-auto and .d-flex for the column that contains the button to make it take as much space at it need and full height
Use .mb-3 for the button since the .form-group has that much margin-bottom.
You may use .btn-outline-secondary instead of .btn-secondary
<div class="col-auto d-flex ">
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col-auto d-flex">
<button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
🎁
Doing so you avoid multiple nesting of .row and .col.
here is another approach, also rethinking the structure with only BS class for the styling
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col ">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="form-group row pl-3">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
Related
I have a form like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<div class="row">
<form class="col s12" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s10">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s10">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s10">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
</form>
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
I want to horizontally center the form input fields within the .container div and left align the h3 and submit button with those input fields but can't figure out how to do it using Materialize helpers and built-in grid classes. I've tried .center-align but as per the docs its only for text. I'm missing something in how the grid system works. Thanks in advance!
While using Materialize you can use the grid utility of push/pull to center your col.
Explanation:
If you have col s8, then the remaining columns for this row is 4 so to center it there should be col s2 before col s8.
Now, push-s2 will acts as an empty col s2 before col s8 so it will be centered.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<div class="row">
<form class="col s8 push-s2" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s12">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
<div class="row">
<div class="col s12">
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
</form>
</div>
</div>
Disadvantages of this way
You can't do this way with an odd col number (ie: col s7) because then the remaining columns for this row is 5 and there is no col s2.5 neither push-s2.5.
My Opinion
Remove <div class='row'> from above form and remove class='col s12' from inside the form, instead you can use max-width with margin: 0 auto to center the form then keep everything else as is, see below:
.main-form {
max-width: 700px;
margin: 0 auto;
}
#media (max-width: 768px) {
.main-form {
max-width: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<form class="main-form" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s12">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
<div class="row">
<div class="col s12">
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
</form>
</div>
Desired result: "between X% and Y%", and the input groups, all on the same line.
This works with regular form fields, but not with input-group:
between
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
Use classes d-inline-flex align-items-center w-auto on input-group:
body { padding: 1em; }
input.form-control { width: 3em; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group d-inline-flex align-items-center w-auto">
between <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
and <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
you could try something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<label for="between" class="mr-2">between</label>
<input type="text" class="form-control" id="between" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="and" class="mr-2 ml-2">and</label>
<input type="text" class="form-control" id="and" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</form>
How can I combine all the form group items such as Select, Input items together just using bootstrap framework?
I have tried the below way but as expected I am getting the space between Select and Input Box
DEMO
The problem is your declaration of mx-sm-3. This applies for the -sm breakpoint and greater if there is no other declaration. The simplest way to correct this is add a reset at the larger breakpoint: mx-md-0:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="custom-select mx-md-0">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mx-md-0">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mx-md-0">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Expand the above code snippet to see how it will render when you exceed the -sm breakpoint. I also changed your <select> to make use of the custom-select class.
I'm not sure if this is what you're after, but if it's not, clarify what you're after a little more and I might be able to help.
If you're just wanting to group the items together, bootstrap has a card class that allows you to group elements into a container of sorts. The code below is wrapped in bootstraps grid system. I've put your code into a div tag with a card class. In a second example, I've removed a the inline form class, so you can see how the inputs are stacked vertically.
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div class="form">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codeply project so you can see how the layout.
I'm using Bootstrap 4 to create a Profile Edit form in my React app..
The form looks fine on a large display, but when on a small display like mobile, the form-groups are overlapping. See the problem image below, notice how the Profile Photo placeholder image is on top of First Name when it should be pushing First Name down and not overlapping.
Am I doing something wrong with the bootstrap Grid system or with form-groups?
JSFiddle: https://jsfiddle.net/v9fpfxyo/
CORRECT:
PROBLEM:
code from JSFiddle:
<div class="container">
<form>
<div class="row">
<div class="col-lg-3 col-sm-12">
<div class="form-group" style="height: 100%;">
<label for="files">Change your profile photo</label>
<span>
<div class="" style="width: 100%; height: 100%; font-size: 0px; margin-bottom: 1rem; background-color: rgb(29, 161, 242); background-image: url("https://abs.twimg.com/a/1498195419/img/t1/highline/empty_state/owner_empty_avatar.png"); background-position: 50% center;">
<!-- react-text: 85 -->Try dropping some files.<!-- /react-text --><input type="file" accept="image/jpeg, image/png" multiple="" style="display: none;">
</div>
<button type="button" class="btn btn-secondary btn-sm btn-block">Upload new Photo</button><!-- react-text: 88 --><!-- /react-text -->
</span>
</div>
</div>
<div class="col-lg-9 col-sm-12">
<div class="form-group">
<label>First Name</label>
<div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
</div>
<div class="form-group">
<label>Last Name</label>
<div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
</div>
</div>
</div>
<div class="row row justify-content-end">
<div class="col-lg-9 col-sm-12"><button type="submit" class="btn btn-primary">Save Changes</button></div>
</div>
</form>
</div>
I had this kinda issue a lot. the way i dealt with them is using media queries. Add a class to the right grid (col-lg-9 col-sm-12). And on smaller screens #media (min-width: 780px) give the class margin-top: 30px;
Let me know if this works for you
Set The Margin OR Apply Css Code media width for mobile device and give the margin for it.
margin-top: 110px;
Example:
<div class="col-lg-9 col-sm-12">
<div class="form-group" style="margin-top: 110px;">
<label>First Name</label>
<div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
</div>
<div class="form-group">
<label>Last Name</label>
<div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="row">
<div class="col-lg-3 col-sm-12">
<div class="form-group" style="height: 100%;">
<label for="files">Change your profile photo</label>
<span>
<div class="" style="width: 100%; height: 100%; font-size: 0px; margin-bottom: 1rem; background-color: rgb(29, 161, 242); background-image: url("https://abs.twimg.com/a/1498195419/img/t1/highline/empty_state/owner_empty_avatar.png"); background-position: 50% center;">
<!-- react-text: 85 -->Try dropping some files.<!-- /react-text --><input type="file" accept="image/jpeg, image/png" multiple="" style="display: none;">
</div>
<button type="button" class="btn btn-secondary btn-sm btn-block">Upload new Photo</button><!-- react-text: 88 --><!-- /react-text -->
</span>
</div>
</div>
<div class="col-lg-9 col-sm-12">
<div class="form-group" style="margin-top: 110px;">
<label>First Name</label>
<div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
</div>
<div class="form-group">
<label>Last Name</label>
<div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
</div>
</div>
</div>
<div class="row row justify-content-end">
<div class="col-lg-9 col-sm-12"><button type="submit" class="btn btn-primary">Save Changes</button></div>
</div>
</form>
</div>
I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.
You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>