In Bootstrap, how do I control the height of my badge? - html

Question

I have a JSFiddle here:
https://jsfiddle.net/bjfm703h/
This code:
<div class="col-1 spacer"></div>
<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
<input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
<span> </span>
<span class="badge badge-danger">Danger</span>
</div>
renders as follows:
with the height of the badge being the same height as my input. Instead, I would like the height of the badge to be the same height as 'Danger' similar to:
https://getbootstrap.com/docs/4.3/components/badge/
How can I do this?

Answer 1

The input-group css class gives elements a flex layout with align-items: stretch property.
You can change the default property or add an additional class to align-items.
Possible solution:
.input-group{
align-items: center !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
<input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
<span> </span>
<span class="badge badge-danger">Danger</span>
</div>

Answer 2

I have copied and modified your JSFiddle code. Try this:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#bdg{
padding-top: 12px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div role="document" class="modal-dialog modal-lg modal-dialog-overflow">
<div class="modal-content pl-3 pr-3">
<div class="modal-body">
<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
<div class="form-row">
<div class="col-12">
<div class="row ml-0 mr-0">
<div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
<div class="row col-12 pl-0 pr-0 mb-2">
<label for="duration" class="col-1 pl-0 justify-content-start align-items-start">Label</label>
<div class="col-1 spacer"></div>
<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
<input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
<span> </span>
<span id="bdg" class="badge badge-danger">Danger</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit: (Solution number 2)
Simply use btn and btn-danger class of bootstrap.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div role="document" class="modal-dialog modal-lg modal-dialog-overflow">
<div class="modal-content pl-3 pr-3">
<div class="modal-body">
<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
<div class="form-row">
<div class="col-12">
<div class="row ml-0 mr-0">
<div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
<div class="row col-12 pl-0 pr-0 mb-2">
<label for="duration" class="col-1 pl-0 justify-content-start align-items-start">Label</label>
<div class="col-1 spacer"></div>
<div class="input-group input-group-alt flatpickr" id="flatpickr9" data-toggle="flatpickr" data-wrap="true">
<input id="key-date-datepicker" type="text" class="form-control kd-datepicker" data-input="" v-model="date">
<span> </span>
<span class="btn btn-danger">Danger</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

Simple change the badge class into a btn class.
Using the btn class does not mean your item has to be a button, it just gives it some of the properties.
<span class="btn badge-danger">Danger</span>