I have the following code in bootstrap. I need to align the label with the checkbox but even after looking at some solutions, I have not been successful:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label>
Show entities?
<input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
</label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
Considering if you are using bootstrap 4, you can do this to get that result
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>
<!-- or using inline form -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Show entities?
</label>
</div>
Try this code snippet hope it will help :
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label class="d-flex align-items-center"> Show entities? <input type="checkbox" id="inactiveEnt" name="checkbox" class="ml-3"> </label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
If you're using Bootstrap, just use a form-group. Create the label and reference the input by using a "for" attribute that matches the ID of the input.
<div class="form-group row">
<label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
</div>
</div>
If I understood what you want I think this can be the solution you are looking for (append classes btn and btn-default to your input element to align vertically to your label text)
<div class="row">
<div class="col-xs-12">
<span>
<input type="checkbox" class="btn btn-default">
</span>
<label class="form-label">here is my label</label>
</div>
</div>
here is the fiddle: https://jsfiddle.net/p9wud84v/1/
Related
I want this result like Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other
But he uses bootstrap 5, I use bootstrap 3.3.7 so it does not work.
<div class="d-flex">
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label'>Y</label>
</div>
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label text-nowrap'>N</label>
</div>
<div class="input-group input-group-sm">
<label>XXX</label><input type='text' />
</div>
</div>
Thank Gerard. But it's different from my thought.
You can add additional CSS to modify the alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>Y</label>
</div>
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>N</label>
</div>
<div class="col-md-4">
<label>XXX</label><input type='text' />
</div>
</div>
I started using bootstrap 5 and noticed there is no spaces between rows. Do we have to explicitly use spacing utility like mb-3 or mb-2 etc Trying to understand the reason behind removing vertical spaces between rows.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Bootstrap 5 has vertical gutters for the Grid. Instead of using separate rows, put the columns in a single row div. Then use whichever gy-* you want on the row...
<form>
<div class="row gy-4">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1"> Example checkbox </label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
https://codeply.com/p/4ZM75xw90B
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
Here is the link to my Plunker: link
The goal is to align the Sample Parking Ticket link with the textbox.
Please note the leading label has no class like col-xs-1 or something.
How can I achieve that?
You can use a bootstrap horizontal form.
Here is a plunkr:
<h1>Citation Form</h1>
<form name="citationSearchForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="citationNumber" class="col-sm-3 control-label">Citation Number:</label>
<div class="col-sm-6">
<input type="text" name="citationNumber" class="form-control" id="citationNumber" placeholder="#" required="">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>Search</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-right">
<a id="lnkSample" href="#">Sample Parking Ticket</a>
</div>
</div>
</form>