I have the code below:
.global-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.header {
width: 1024px;
background-color: purple;
padding: 7px;
margin: 0;
}
div {
overflow: hidden;
white-space: nowrap;
}
.contents svg {
height: 25px;
width: 25px;
vertical-align: middle;
}
.contents .title {
color: white;
margin: 0;
font-size: 16px;
vertical-align: middle;
margin-left: 15px;
}
.contents .switch {
align-content: right;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="global-wrap">
<div class="header">
<div class="contents">
<div class="form-inline">
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="title">Title</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
</span>
</div>
</div>
</div>
</div>
</div>
However, the bootstrap switch does not appear on the same line as the hamburger and Title Text. Why doesn’t bootstrap element appear on a new line and how can I make sure that the switch appears on the same line being right aligned?
2
Answers
You need to add the
d-inline-flex
class to theform-check
class. Also, add theposition-absolute
class to theform-check
class and theposition-relative
class to its parent. Finally, add the following CSS to align the switch right:See the snippet below.
By default the
.form-check
class is displayed as ablock
, which means in regular flow it moves to its own line.To create an inline form check, use the
.form-check-inline
class along side the.form-check
class.See https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline