How to Give a Bootstrap Btn a 5 Point

How can I get my Twitter Bootstrap buttons to right align?

Insert pull-right into the class attribute and let bootstrap arrange the buttons.

For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.

For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none}

For Boostrap 5, see: https://getbootstrap.com/docs/5.0/utilities/float/

The closest solution would be float-end.

How can I increase the size of a bootstrap button?

You can try to use btn-sm, btn-xs and btn-lg classes like this:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

JSFIDDLE DEMO

You can make use of Bootstrap .btn-group-justified css class. Or you can simply add:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

JSFIDDLE DEMO

Fixed width buttons with Bootstrap

You can also use the .btn-block class on the button, so that it expands to the parent's width.

If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.

<div class="span2">
    <p><button class="btn btn-primary btn-block">Save</button></p>
    <p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

How can I add a Bootstrap class to a 'Button' element through javascript?

I do not know why does it work in the case of TextField, but the correct way to define the class using JavaScript DOM is to either use classList or use className, these are two DOM properties.

In your case, you should use this to add btn btn-info class to the button.

btn.className = 'btn btn-info';

Or alternatively, you can also use this to add multiple classes one by one-

btn.classList.add('btn');
btn.classList.add('btn-info');

Bootstrap buttons in one line

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

Bootstrap Button Hyperlink

You can use JavaScript for your solution. window.location.href sets the URL for the button.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><button class="btn btn-success" onclick="window.location.href='http://cdnjs.com/libraries/twitter-bootstrap'">First button</button>

bootstrap 4 align buttons in center

Just use margin:auto its working with bootstrap 4

.center{margin:auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><section class="row">  <div class="center">    <a class="btn btn-outline-primary" href="#">Home</a>    <a class="btn btn-outline-primary" href="#">Traffic</a>    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>    <a class="btn btn-outline-primary" href="#">Alert Logging</a>    <a class="btn btn-outline-primary" href="#">Diameter Server</a>    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>  </div></section>

Bootstrap 4 responsive button size

Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin...

/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}

https://www.codeply.com/go/FoEUO7XCDU

Update - Bootstrap 4.1
This button-size mixin has changed slightly to:

@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}

Bootstrap: Aligning two buttons on the same row

Wrap them in two separate columns like this:

<div class="panel-footer row"><!-- panel-footer -->
    <div class="col-xs-6 text-left">
        <div class="previous">
          <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-chevron-left"></span>
          </button>
        </div>
    </div>
    <div class="col-xs-6 text-right">   
        <div class="next">
          <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-chevron-right"></span>
          </button>
        </div>
    </div>
</div><!-- end panel-footer -->

By the way, you can use the built in helper classes text-left / text-right like I've done on the column divs so you don't need to add the extra css. In that case you can remove the extra divs you've added.