CODEWITHSUNDEEP
htmltwitter-bootstrapbutton
Dogan Can
Dogan Can

Reputation: 53

Bootstrap buttons in one line

Buttons

Here is my code, and i dont know how to place the buttons side to side. (btw I'm new at coding)

<div class="second">
           <div class="col-md-12 text-center">
               <form>
            <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
               </form>
           </div>
            <div class="col-md-8 text-center">
                <form>
                    <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
                </form>
            </div>
        </div>

Upvotes: 5

Views: 27325

Answers (5)

Adam H
Adam H

Reputation: 172

Since you are using bootstrap, there are a few things you need to know:

.col class will not work without putting the class within .container and .row classes. The other important thing is that the column numeric sizes add up to 12; right now yours add to 20. So your code should look more like this:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
       <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
    <div class="col-12 col-md-6">
      <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
  </div>
</div>

Here is a codepen to show it working

Refer to Bootstrap documentation on grids as well

Upvotes: 4

grepLines
grepLines

Reputation: 2558

Before looking into the answer below, I suggest that you read about boostrap grid system. Each row has 12 columns.

Your first <div> used up 12 columns, and that's why the second button of the second <div> is on the new row/line.

More details can be found here: Bootstrap: Aligning two buttons on the same row

Upvotes: 0

Daniel Taub
Daniel Taub

Reputation: 5359

<div class="second">
       <div class="col-md-12 text-center">
           <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
        </div>
    </div>

The buttons were in different columns, so it went one line down.

Read more about Bootstrap grid system

Upvotes: 0

hans-k&#246;nig
hans-k&#246;nig

Reputation: 553

<div class="row second">
    <div class="col-md-4 text-center">
            <form>
                 <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
            </form>
    </div>

    <div class="col-md-8 text-center">
            <form>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
    </div>
</div>

Upvotes: 0

EstevaoLuis
EstevaoLuis

Reputation: 2542

Just put the buttons inside the same form and div

<div class="second">
     <div class="col-md-12 text-center">
           <form>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
      </div>
</div>

Upvotes: 4

Related Questions