Como posso usar dois tílos (label) em cima de um group button usando bootstrap?
imagem:
A ideia é usar "range" numérico de 0 a 10, com um título na ponta esquerda e um título do lado direito.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeOpção 1
Usando o próprio grid do Bootstrap vc coloca o btn-group
em um row
e as labels
em um row
acima, cada label
vc deixa de uma lado do row
usando as classes flex
do Bootstrap
Essa opção não tem css customizado, apenas o css nativo do Bootstrap
/* só com o css nativo do Bootstrap */
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-12 d-flex justify-content-between text-right">
<label class="">
label 1
</label>
<label class="">
label 2
</label>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="btn-group w-100 btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary w-100 active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</div>
</div>
</div>
Opção 2
Usando um before
e um after
no btn-group
, no content
de cada pseudo elemento vc coloca o texto que quiser e deixa um alinhado a direita e outro a esquerda.
[data-toggle="buttons"] {
position: relative;
top: 100px;
}
[data-toggle="buttons"]::after,
[data-toggle="buttons"]::before {
position: absolute;
top: calc(-50% - 0.25em);
font-size: 24px;
color: blue;
}
[data-toggle="buttons"]::after {
content: "1";
left: 0;
}
[data-toggle="buttons"]::before {
content: "2";
right: 0;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</div>
</div>
</div>
margin
no label 1.