I would like to remove all the extra spacing between my form controls using bootstrap 4 horizontal form to make it more compact and smaller. I added the css below which removes some of the spacing, but the spacing between label and input is still there and I cant figure out how to remove it.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Use !important to prevent override:
.form-group {
margin-bottom: 0px!important;
}
Or use bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
For example:
.space .form-group {
margin-bottom: 0px!important;
}
<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>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>
Bootstrap sets a default margin-bottom on the .form-group class:
By default it only applies margin-bottom
https://getbootstrap.com/docs/4.1/components/forms/#form-groups
If youre using precompiled bootstrap just overwrite it using a stronger selector (aka proper cascading).
If youre compiling bootstrap yourself just set the $form-group-margin-bottom variable to whatever value you desire (e.g. 0).
I solved it by adding
label {
margin-bottom: 0;
}
It works fine now.
Related
Bootstrap 4.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.
If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
My question is, how can I get a large left aligned checkbox on my form?
I am also searched before for the same issue, but not satisfied with the above answer that's why I have done my research and I found a good solution. Just add class "col-sm-1"
in the input tag, you are done.
<div class="col-8">
<input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
<span asp-validation-for="IsUrgent" class="text-danger" />
</div>
you can also use like this if you are not satisfying with class name
input[type="checkbox"]{
width: 30px; /*Desired width*/
height: 30px; /*Desired height*/
cursor: pointer;
-webkit-appearance: none; /* if you want check inside box then remove this line*/
appearance: none; /* if you want check inside box then remove this line*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large {
width: 25px !important;
height: 25px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
I have a text field and a button with the following code:
<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="form-group">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
<div>
<button type="submit" class="btn btn-success">Confirm VAT number</button>
</div>
</form>
The result is shown below:
How can I ensure a whiteline between the textbox and the button?
You can apply a margin-bottom to the input wrapper with a separate class.
You'll need to use !important because .form-inline .form-group has a margin-bottom: 0 property.
<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="form-group margin-bottom">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
<div>
<button type="submit" class="btn btn-success">Confirm VAT number</button>
</div>
</form>
.margin-bottom{
margin-bottom: 1.25rem;
}
http://codepen.io/tomanagle/pen/rLEGXz
In your example, you could add some custom CSS on form-group
.form-inline .form-group {
margin-bottom: yourValue;
}
Only do that if you want to apply the margin to all form-group elements
Or you could add a new class to the element and apply styling that way. Use this method if you only want to add the margin to specific form-group elements
HTML
<div class="form-group form-group--margin-bottom">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
CSS
.form-inline .form-group--margin-bottom {
margin-bottom: yourValue
}
You need to include the .form-inline class to override bootstrap's specific targeting of that element. I wouldn't advise using !important unless absolutely necessary as it came make the CSS harder to understand in the future
I have a working version of the 2nd option on codepen
I came across an interesting issue when trying to use html5's form size/maxlength and bootstrap.
The size is overridden by boostrap's .form-control class, but removing it causes the input to lose its styling.
Code pen : http://codepen.io/rkhayat/pen/JoeBqx
Thanks
<div class="container">
<div class="form-group">
<p>Phone</p><input class="form-control" id="inputPhone" maxlength=
"3" name="phone" required="required" size="3" title="" type="tel"
value="">
</div>
</div><!--with form-control-->
<div class="container">
<p>Notice that removing form-control loses ALL styling, but keeps the
size from html size input</p>
</div>
<div class="container">
<div class="form-group">
<p>Phone</p><input id="inputPhone" maxlength="3" name="phone"
required="required" size="3" title="" type="tel" value="">
</div>
</div><!--without form-control-->
Edit: Researching I have found this http://getbootstrap.com/css/#column-sizing
Implemented bootstrap's recommended fix, feels like a hack.
<div class="col-xs-4">
<div class="form-group">
<p>Phone</p>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-4">
<input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title="">
</div>
</div>
</div>
I use am using cols to size width of lots of form elements (particularly whole form-groups). I just call them class="skinny" and then add:
.skinny{
padding-left:0;
}
Works fine for me so far. have not tried for maxlength but this solve my major layout headache!
Update This question has been viewed a lot, here's a blog post I wrote about it!
http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/
Fixed it with the following if anyone is interested. Thank you #web2tips for your input. (Refer to question for html)
.phone-number .col-xs-3::after{
content: "-";
position:absolute;
right: 5px;
color: black;
border: 0px solid;
top: 5px;
}
.phone-number .col-xs-4{
width:25%;
}
.phone-number .col-xs-3, .phone-number .col-xs-4{
padding-left:0;
}
It's a shame that bootstrap's .form-control has width built in though.
I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.
How can I do that (if possible)?
You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:
<div class="control-group">
<div class="controls">
<label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
<label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
</div>
</div>
Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.
I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...
You can use similar formatting to .form-horizontal implementation in bootstrap. (scroll sown to Horizontal Forms here: http://twitter.github.com/bootstrap/base-css.html#forms)
Wrap your labels and form elements in grouping divs (that's what .control-group does in Horizontal Form layout in bootstrap).
Float labels left to show them in horizontal alignment with the fields.
label.horizontal {
float: left;
width: 160px;
padding-top: 5px;
margin-right: 20px;
text-align: right;
}
In the above example, labels with class .horizontal will be "horizontally styled" and the rest "vertical" or default form layout.
there is a class ready to use on bootstrap!
check this example:
<div class="span6">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>
I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:
<form id="sg1">
<label for="member1">member 1</label>
<input name="member1" id="member1" value="jack" />
<label for="member2">member 2</label>
<input name="member2" id="member2" value="carter" />
<label for="member3">member 3</label>
<input name="member3" id="member3" value="jackson" />
<label for="member4">member 4</label>
<input name="member4" id="member4" value="tielk" />
</form>
Trying to get:
[input box 1] [input box 2]
label 1 label 2
etc, with all elements.
A quickly whipped up example that works:
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<form id="sg1">
<label>member 1 <input name="member1" id="member1" value="jack" /></label>
<label>member 2 <input name="member2" id="member2" value="carter" /></label>
<label>member 3 <input name="member3" id="member3" value="jackson" /></label>
<label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>
Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.
Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:
<div class="pair">
<input type="text" name="foo" value="bar" /><br />
<label for="foo">shabba</label>
</div>
<div class="pair">
…
</div>
CSS:
div.pair {
float:left;
}
You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.
You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.
The simplest way is to put the label beneath the input on the html:
<form id="sg1">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</form>
Then you can wrap each input/label pair with a div, and set the div like so:
<form id="sg1">
<div class="wrap">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
</div>
<div class="wrap">
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
</div>
<div class="wrap">
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
</div>
<div class="wrap">
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</div>
</form>
#sg1 div
{
clear: both;
float: left;
}
Next you can put
#sg1 label
{
float: right;
}
input
{
display:block;
}