title: Bootstrap 4.1.1 form-check form-check-inline radio button
body: <p>I am trying to display a radio button as inline option.
  In the Bootstrap 4.1.1 docs the example code is:</p>
  
  <pre><code>&lt;div class="form-check form-check-inline"&gt;
    &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"&gt;
    &lt;label class="form-check-label" for="inlineRadio1"&gt;1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-check form-check-inline"&gt;
    &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"&gt;
    &lt;label class="form-check-label" for="inlineRadio2"&gt;2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-check form-check-inline"&gt;
    &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled&gt;
    &lt;label class="form-check-label" for="inlineRadio3"&gt;3 (disabled)&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Despite I clone this to my html it does not work and radio button are displayed normal.</p>
  
  <p>My <strong>Html</strong> code is:</p>
  
  <pre><code>{% load static %}
  &lt;link rel="stylesheet" type="text/css" href="{% static 'surveys/style.css' %}" /&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;TFM Survey&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="{{ STATIC_URL }}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
      &lt;link href="{{ STATIC_URL }}/static/bootstrap/js/bootstrap.js" rel="stylesheet" media="screen"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
       &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="../../assets/js/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="../../assets/js/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;form action="{% url 'surveys:vote' %}" method="post"&gt;
          {% csrf_token %}
  
          {% if questions %}
          &lt;ul class="list-group"&gt;
  
          {% for question in questions %}
              &lt;li class="list-group-item list-group-item-dark"&gt;{{ question.question_text}}&lt;/li&gt;
              {% if question.choice_set.all %}
                  {% for choice in question.choice_set.all %}
                      &lt;div class="form-check form-check-inline"&gt;
                          &lt;input class="form-check-input" type="radio" name="{{ question.id }}" id="choice{{ forloop.counter }}" value="{{ choice.choice_text }}"&gt;
                          &lt;label class="form-check-label" for="choice{{ forloop.counter }}"&gt;{{ choice.choice_text }}&lt;/label&gt;
                      &lt;/div&gt;
                  {% endfor %}
              {% else %}
                  &lt;input type="text" class="form-control" placeholder="Type some answer..." name="{{ question.id }}"/&gt;
              {% endif %}
          {% endfor %}
          &lt;/ul&gt;
          {% else %}
              &lt;p&gt;No questions are available.&lt;/p&gt;
          {% endif %}
          &lt;input type="submit" class="btn btn-primary" value="Vote" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried using also the <code>class="checkbox-inline"</code> but It doesn't work neither.
  I have seen that the <code>div</code> tends to use all the width, so I also specify:</p>
  
  <pre><code>#radio-div{
   width:auto
  }
  </code></pre>
  
  <p>But neither works (I have used the id statement in the radio input).
  Does anyone if there is some clear mistake in this implementation?</p>