The text-center centers the label "check this custom checkbox" but the input remains on the left.
If you remove that custom-control-input class then you will see a new checkbox input which will be centered and the bootstrap input will still be there on the left and it will be unclickable.
I want to center the whole thing.
<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 text-center">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Use Bootstrap 4.1 or newer like the latest 4.2.1 release. The custom-control-label was changed as of Bootstrap 4.1 to be position:relative which will allow both the checkbox and label to be centered.
Demo
Try this markup:
<label class="custom-control-label" for="customCheck1"><input type="checkbox" class="custom-control-input" id="customCheck1" />Check this custom checkbox</label>
You can try this code,
just tell your current div 'd-inline-block' this is bootstrap class and wrap a container class and add text-center
<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 text-center">
<div class="custom-control d-inline-block custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
</div>
Related
I would like to connect multiple text inputs with the same layout as connecting text-inputs with appends. However, I am not sure how to do that. As per docs, it is only possible to append a button or text to a text-input:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
However, I would like to connect 2 text-inputs. But when I try, the inputs start stacking instead of beeing displayed next to eachother:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
How can I achieve what I want?
You have to change the width property of class .input-group .form-control to auto. It's currently 100%. That's why the input is taking the entire space.
Note: This will override the default behaviour, so you may add custom class name and then modify, if you want to avoid default modification.
A screenshot
I`m using bootstrap to create an image radio button, and I'm trying to position the radio button on the right corner of the image, tried absolute positioning but its not working, maybe I'm just missing something.
https://codepen.io/jhongeric/pen/eYNrgPP
div {
margin-left: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="custom-control custom-radio image-checkbox">
<input type="radio" class="custom-control-input myinput" id="ck2a" name="ck2">
<label class="custom-control-label" for="ck2a">
<img src="https://via.placeholder.com/350
C/O https://placeholder.com/" alt="#" class="img-fluid">
</label>
</div>
.custom-control-label::before{left:auto;right:0;}
https://codepen.io/vadivel-tlga/pen/NWqMdQX
I have a HTML input.
The small help text i populate with Jquery.
My problem is that the input-group-addon height will stretch all way down to the smallelement. I´d like it to be as high as the input.
How can i solve this?
<div class="input-group">
<div class="input-group-addon">Obj. Nr</div>
<input type="text" class="form-control">
<small class="form-text text-muted"></small>
</div>
Just add small element after input
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-addon">Obj. Nr</div>
<input type="text" class="form-control">
</div>
<small class="form-text text-muted">Small element</small>
</div>
I will like to put an image beside and input field using bootstrap. i want my output to be like :`
but with the below code i get
<div class="form-group row">
<label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
<input type="title" class="form-control" id="inputTitle" >
</div>
</div>
The form-control class will make your input 100% wide, meaning it will flow onto the next line. Additionally, it will make it display as a block element.
If I were you, I would look at using input groups instead, this is a nice tidy way of achieving the same effect:
Also, you have given your text input a type of title which is not valid. It's likely just a text input.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
I think this should do it
<div class="form-group">
<label class="control-label">Title</label>
<div class="input-group"><span class="input-group-addon"></span>
<input type="text" class="form-control">
</div>
</div>
This is a cosmetic question, but I've got a form for sending out messages to predefined recipients and/or to custom recipients. But if you run the example you'll notice a small vertical alignment problem with the checkbox and the textbox for the last option (Ideally the checkbox would vertically aligned to the center of the textbox). I could manually override the top margin of the checkbox with an inline style of 10px, but I'm hoping there is an option that doesn't rely on an assumption of textbox size? I've tried the input-group or form-inline for just the last option, but none seem to be quite right and tend to make it worse.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Recipient Types</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Send to Sales Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Send to HR Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
</form>