title: Forcing buttons to be horizontal in bootstrap
body: <p>Been trying to build an app with some buttons, and it seems impossible to force them to be horizontal, almost like they by default want to be vertical aligned for the fun of it. </p>
  
  <p>As far as I can tell, it is somehow related to the width of the page, and as far as I can tell its based on column system</p>
  
  <p>Here is my problem, I created a menu in the layout, and got it to line up horizontally, then moved it into a directive, one part lines up correctly (the top bit) the second part is lining up as vertical.</p>
  
  <p>As I understand it, if I create a button group (in this case a btn-toolbar) and I tell it to be col-md-1 then each of these buttons SHOULD take up 1 column of the btn-toolbar space. But I do not know how to set the toolbar width. </p>
  
  <p>I am using Stylus and Jade as well as angular. Hence the look of things</p>
  
  <p>The two menu sniplets</p>
  
  <pre><code>div.layout
      div.topmenu(ng-show="app.menushow")
          .btn-toolbar
              .topcontainer
                  a(href="/about")
                      .button.col-md-offset-10
                          .btn.btn-sm.col-md-1.btn-primary.btn-topmny.
                              About
                  a(href="/contact")
                      .button.col-md-offset-11
                          .btn.btn-sm.col-md-1.btn-primary.btn-topmny.
                              Contact-us
  </code></pre>
  
  <p>That one works</p>
  
  <p>And this one
      div.botmenu(ng-show='app.menushow')
          .btn-toolbar
              .menucontainer.col-lg-6.col-offset-4
                  a(href="/boompad")
                  .button
                      .btn.btn-sm.col-md-1.btn-primary.btn-topmny.
                          About
                      .button
                          .btn.btn-md.col-md-1.btn-xlarge.
                              Make Music
                  a(href="/Config")
                      .button
                          .btn.btn-md.col-md-1.btn-xlarge.
                              Configure
                  a(href="/")
                      .button
                          .btn.btn-md.col-md-1.btn-xlarge.
                              Home
                  a(href="/Login")
                      .button
                          .btn.btn-md.col-md-1.btn-xlarge.
                              Login</p>
  
  <p>The CSS that controls it</p>
  
  <pre><code>body {
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #525252 !important;
  }
  .btn-topmny {
    width: 75px;
  }
  .btn-xlarge {
    background-color: #888;
    filter: blur(5px);
    height: 175px;
    width: 175px;
    padding: 48px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    border: 2 !important;
    margin-left: 15px;
    margin-bottom: 25px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    font-weight: bold !important;
    box-shadow: 0 10 0 #006;
  #ccc
  }
  .btn-xlarge:focus {
    outline: 0;
  }
  .btn-xlarge:hover {
    top: 2px;
  }
  .btn-xlarge:active {
    top: 6px;
  }
  .topcontainer {
    postition: absolute;
    top: 5;
  }
  .menucontainer {
    position: absolute;
    bottom: 0;
  </code></pre>