Center Radios

Center radio buttons inside a container or div

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container py-3">
  <div class="text-center">
    <h2>Center Radio buttons</h2>
    <p><b>Description:</b> Center the radio buttons horizontally when the text for the radio button is dynamically generated and the width is unknown.</p>
  </div>
  <div id="form" class="bg-white border shadow mx-auto my-3 p-3 rounded">
    <p class="text-center lead">My radios</p>
    <div id="radios">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
        <label class="form-check-label" for="exampleRadios3">
        </label>
      </div>
    </div>
    <button onclick="getValues()" class="btn btn-primary w-100 mt-3">Generate Radio Values</button>

  </div>
  <p class="text-center">Place radios inside a div and include the following css:</p>
  <code>
    div#radios { <br>
    <div class="ml-3">
      margin: 0 auto;<br>
      width: auto;<br>
      text-align: left;<br>
      display:...

SCSS

body {
  background-color: lighten(#007bff, 45%);
}

#form {
  width: 300px;

  div#radios {
      margin: 0 auto;
      display: table;
    }
  }

code {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}

#css {
  width: 300px;
  background-color: white;
  margin: 0 auto;
}