Menu
How can I make this label align right? I can only align it left. I have to override the bootstrap 4 default value of justify-content: center to justify-content: right !important; But it aligns to the left. How can I align it to the right?
<div class="modal-body">
<form class="form-horizontal">
<div class="form-inline">
<label class="col-md-4">Type</label>
<input class="col-md-8" type="email" class="form-control">
</div>
</form>
</div>
CSS:
div.form-inline label.col-md-4 {
justify-content: right !important;
}
956
Use the . form-horizontal class in Bootstrap to align labels and groups of form controls in a horizontal layout.
Solutions with CSS properties We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.
Align the text left or right Select the text that you want to align. On the Home tab, in the Paragraph group, click Align Left or Align Right .
add class "text-right" to label
<div class="modal-body">
<form class="form-horizontal">
<div class="form-inline">
<label class="col-md-4 text-right">Type</label>
<input class="col-md-8" type="email" class="form-control">
</div>
</form>
</div>
You need to change it to:
div.form-inline label.col-md-4{
justify-content: flex-end;
}
justify-content: right is not a valid value.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
