Issue
How can I force line-break in specific place of button-group below specific screen size ?
I have button-group with 4 buttons in line. I want to break it into two lines AFTER first button if there is not enough space.
<div class="input-group" role="group">
<div class="input-group-text" id="btnGroupAddon">
<a class="btn btn-secondary" role="button">Add</a>
</div>
<!-- Line break when screen width<=600 -->
<input type="text" class="form-control">
<div class="input-group-text" id="btnGroupClear">
<a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
</div>
<div class="input-group-text" id="btnGroupSearch">
<a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>Solution
You could use this SCSS:
@media (max-width: 576px) {
.wrapping-group:not(#_) > * {
&:first-child {
flex: 1 0 100%;
border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0;
.btn {
width: 100%;
}
}
&:not(:first-child) {
margin-top: -1px;
}
&.form-control {
margin-left: 0;
border-bottom-left-radius: 0.25rem;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
working demo:
@media (max-width: 576px) {
.wrapping-group:not(#_)>*:first-child {
flex: 1 0 100%;
border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0;
}
.wrapping-group:not(#_)>*:first-child .btn {
width: 100%;
}
.wrapping-group:not(#_)>*:not(:first-child) {
margin-top: -1px;
}
.wrapping-group:not(#_)>*.form-control {
margin-left: 0;
border-bottom-left-radius: 0.25rem;
}
.wrapping-group:not(#_)>*:last-child {
border-top-right-radius: 0;
}
}
/* not part of solution: */
body {
padding: 5rem 1rem 1rem
}<div class="input-group wrapping-group" role="group">
<div class="input-group-text" id="btnGroupAddon">
<a class="btn btn-secondary" role="button">Add</a>
</div>
<!-- Line break when screen width<=600 -->
<input type="text" class="form-control">
<div class="input-group-text" id="btnGroupClear">
<a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
</div>
<div class="input-group-text" id="btnGroupSearch">
<a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>You’ll have to apply wrapping-group class to the group you want this behavior on, so it doesn’t apply to all .input-groups.
Also, I used Bootstrap 5’s xs/sm breakpoint (576px) instead of 600px but you can change it to whatever makes sense for your case.
Answered By – tao
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0