CODEWITHSUNDEEP
htmlcssbootstrap-4
Miguel
Miguel

Reputation: 3054

Bootstrap 4: two btn-group-vertical side by side

I have two groups of buttons aligned vertically inside a form. How to force the groups to be side by side?

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <div class="col-4">
        <form action='{% url "anotar:annotate" next_page_number %}' method="POST" id="post-form">
            {% csrf_token %}
            <input type="hidden" id="tweet_id" name="tweet_id" value="{{tweet_id}}">
            <fieldset>
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="favor" {%if sentimento == 'favor'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="contra" {%if sentimento == 'contra'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-stance" {%if sentimento == 'inconclusivo-stance'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>

            <fieldset>
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="positivo" {%if sentimento == 'positivo'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="negativo" {%if sentimento == 'negativo'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-senti" {%if sentimento == 'inconclusivo-senti'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>
            <br>
            <button type="submit" class="btn btn-primary rounded" >Submit</button>
        </form>
    </div>

Upvotes: 0

Views: 263

Answers (1)

xy2_
xy2_

Reputation: 7162

You can use a grid with the fieldsets as columns:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <div class="container">
    <div class="row">
    <div class="col-12">
        <form action='{% url "anotar:annotate" next_page_number %}' method="POST" id="post-form">
            {% csrf_token %}
            <input type="hidden" id="tweet_id" name="tweet_id" value="{{tweet_id}}">
          <div class="row">
            <fieldset class="col">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="favor" {%if sentimento == 'favor'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="contra" {%if sentimento == 'contra'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-stance" {%if sentimento == 'inconclusivo-stance'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>

            <fieldset class="col">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="positivo" {%if sentimento == 'positivo'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="negativo" {%if sentimento == 'negativo'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-senti" {%if sentimento == 'inconclusivo-senti'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>
            </div>
            <br>
            <button type="submit" class="btn btn-primary rounded" >Submit</button>
        </form>
    </div>
</div>
</div>

Upvotes: 2

Related Questions