CODEWITHSUNDEEP
bootstrap-4radio-button
roland
roland

Reputation: 900

Vetically arranged radio buttons leaving gaps (Bootstrap 4)

I need radios styled as buttons similar to this. But the buttons should be vertically arranged like this. I have tried to use ‘.btn-group-vertical’, but this leaves gaps between the buttons with ‘’ tags. How is it intended to do with Bootstrap? Can I achieve this layout without additional CSS? 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="btn-group btn-group-toggle" role="radiogroup" data-toggle="buttons">
  <div class="btn-group-vertical">
    <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>

Upvotes: 0

Views: 31

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6694

You were very close. You need to wrap your radios in <div class="btn-group-toggle btn-group-vertical" role="radiogroup" data-toggle="buttons"> and it works.

/*DEMO*/body{padding-top:3rem;padding-left:3rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="btn-group-toggle btn-group-vertical" role="radiogroup" 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>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Upvotes: 1

Related Questions