Use two titles (labels) in an input group bootstrap

Question

Use two titles (labels) in an input group bootstrap

Navigation

#1 by (2 votes)

2

How can I use two labels on a group button using bootstrap?

image:

The idea is to use numeric range 0 to 10, with a title on the left end and a title on the right.

css twitter-bootstrap

asked by anonymous 27.10.2018 / 21:09

1 answer

HTML5 / CSS3: How to fix an unordered list item at the end of all items border radius color in 2 colors

score 2 · Accepted Answer

Option 1

By using Bootstrap's own grid you set btn-group to row and labels to row above, every label using Bootstrap% classes%

This option has no custom css, just the 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><scriptsrc="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 row and flex in before , in after of each pseudo element you put the text you want and leave one aligned to the right and one 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><scriptsrc="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>