Reputation: 13693
I have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Upvotes: 0
Views: 323
Reputation: 15055
label
instead of span
label
and the input
with another element..form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
Upvotes: 1
Reputation: 26
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text. Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets. And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
Upvotes: 0
Reputation: 301
I think you're looking for the property white-space: nowrap;
on any text containers. This will prevent the line breaks & force the text to one line.
Upvotes: 0