Use two titles (Abels) in a bootstrap input group

Asked

Viewed 63 times

2

How can I use two tabs (label) on top of a group button using bootstrap?

image:

inserir a descrição da imagem aqui

The idea is to use numerical "range" from 0 to 10, with a title on the left and a title on the right side.

css twitter-bootstrap

  • Just put two Abels and one margin in the label 1.

  • Can you exemplify with the code? because the size of this "group button" is variable

  • Hugo’s answer already fails him?

1 answer

2


Option 1

Using one’s own grid of Bootstrap you put the btn-group in a row and the labels in a row above, each label you leave a side of the row using the classes flex bootstrap

This option has no custom css, only native Bootstrap css

/* 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>

Option 2

Using a before and a after in the btn-group, in the content of each pseudo element you put whatever text you want and leave one aligned to the right and the other to the left.

[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>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.