I have tried everything but I can't place checkbox right to the label. I could move the checkbox to the right of label, if it is general type of checkbox. But I could not do the same with custom-checkbox type.
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Label</label>
</div>
The custom checkbox is created with pseudo elements so their positioning needs to be adjusted relative to the label.
.custom-control.custom-checkbox{padding-left: 0;}
label.custom-control-label {
position: relative;
padding-right: 1.5rem;
}
label.custom-control-label::before, label.custom-control-label::after{
right: 0;
left: auto;
}
<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="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Label</label>
</div>
The earlier #serg-chernata answer doesn't seem to work for me with custom-switch. Here's an example i got working.
CSS
div.custom-control-right {
padding-right: 24px;
padding-left: 0;
margin-left: 0;
margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
right: -1.5rem;
left: auto;
}
div.custom-control-right .custom-control-label::before {
right: -2.35rem;
left: auto;
}
HTML
<div class="custom-control custom-control-right custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>
JsFiddle
https://jsfiddle.net/2cmbq9r0/
Screenshot
Edit: changed left:initial to left:auto to make it work with IE11.
If you are okay with...
Greater distance between the label and checkbox
Using the basic form-check class instead of custom-control
then one alternative is using a col-right class to move the checkbox to the far side of your form. In some cases, I have found that aligning labels and input elements on the far-left and far-right, respectively, provides a nice consistent look
<div class="row form-row">
<div class="col">
<label class="form-check-label" for="customCheck">Label</label>
</div>
<div class="col-right">
<input type="checkbox" class="form-check-input" id="customCheck" name="example1">
</div>
</div>
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>
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<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="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
how to create focus on two elements?
<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control">
<span class="loop-icon form-control-feedback"></span>
</div>
</div>
no focus
I would like to get something like that
results
I don't want to use javascript
You can use sibling selector " + " that will select the next element.
.inp:focus + .icon{
color:red;/* can use any color*/
}
This code will select the sibling of input, i.e. the icon class, when the input is focused,
form-group{
position:relative;
}
.icon{
position: absolute;
right: 35px;
top: 11px;
}
.inp{
padding:right:40px;
}
.inp:focus + .icon{
color:red;/* can use any color*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control inp">
<span class="fa fa-search form-control-feedback icon"></span>
</div>
</div>
I want to align some check boxes with labels such that the check boxes are in a vertical row to the right side and the labels are aligned with the starting edges in a vertical row on the left side.
.row {
display: flex;
}
.row label { flex: 1; max-width: 25%; }
<div class="container">
<div class="row">
<label>Label</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 2</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 3</label><input type="checkbox" />
</div>
</div>
I believe this is what you're looking for:
label {
display: inline-block;
padding-left: 15px;
}
<form>
<div>
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
</div>
<form>
Working Example: JSFiddle
Css File:
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
HTML File:
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">✓</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">✓</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">✓</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">✓</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">✓</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">✓</span></label>
</div>
</div>
Or
Refer this Link:
https://bootsnipp.com/snippets/featured/badgebox-css-checkbox-badge
I've got this piece of code:
<h2>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
</div>
Which produces this:
But I want to add a button in the place of this red box:
(What do I need to do?)
Edit: It should not be the submit button
try this code and style color it as you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
i guess you can work with cols, sth like:
<div class="form-group">
<div class="col-md-12">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" id="workout-keywords">
</div>
<div class="col-md 4">
<span class="btn btn-default">Button</span>
</div>
</div>
You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this:
<h1>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
<button type="submit">Submit</button>
</div>
.form-group {
position: relative;
padding: 0;
input {
padding-right: 60px;
height: 25px;
line-height: 25px;
width: 100%;
}
button {
position: absolute;
right: 0;
top: 0;
width: 60px;
line-height: 25px;
text-align: center;
z-index: 300;
}
}
I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
<div class="form-group">
<label class="sr-only" for="test">input here something</label>
<div class="input-group" style="display:flex;">
<input type="text" class="form-control" id="test" placeholder="input here something">
<button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
</div>
</div>
</form>
Hope this helps.