I am attempting to showcase a radio button as an inline option. According to the Bootstrap 4.1.1 documentation, the example code is:
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Despite copying this code to my HTML, the radio buttons are still displayed normally.
My HTML code looks like this:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'surveys/style.css' %}" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TFM Survey</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ STATIC_URL }}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="{{ STATIC_URL }}/static/bootstrap/js/bootstrap.js" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form action="{% url 'surveys:vote' %}" method="post">
{% csrf_token %}
{% if questions %}
<ul class="list-group">
{% for question in questions %}
<li class="list-group-item list-group-item-dark">{{ question.question_text}}</li>
{% if question.choice_set.all %}
{% for choice in question.choice_set.all %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ question.id }}" id="choice{{ forloop.counter }}" value="{{ choice.choice_text }}">
<label class="form-check-label" for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label>
</div>
{% endfor %}
{% else %}
<input type="text" class="form-control" placeholder="Type some answer..." name="{{ question.id }}"/>
{% endif %}
{% endfor %}
</ul>
{% else %}
<p>No questions are available.</p>
{% endif %}
<input type="submit" class="btn btn-primary" value="Vote" />
</form>
</div>
</body>
</html>
I also tried using the class="checkbox-inline", but that didn't work either. I noticed that the div seems to use all the width, so I added:
#radio-div{
width:auto
}
However, even with the ID statement in the radio input, it still doesn't work. Is there a clear mistake in this implementation?