CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
vrghost
vrghost

Reputation: 1224

Forcing buttons to be horizontal in bootstrap

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.

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

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.

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.

I am using Stylus and Jade as well as angular. Hence the look of things

The two menu sniplets

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

That one works

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

The CSS that controls it

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;

Upvotes: 0

Views: 2639

Answers (1)

Bala
Bala

Reputation: 706

Using col-lg-* or col-md-* or col-sm-* values will become horizontal at some point when the screen become smaller than its supported sizes. The standard screen sizes are in the bootstrap site url: http://getbootstrap.com/css/#grid-options

  • lg for screen >= 1170px will be horizontal. same for the following.
  • md >= 970px
  • sm >= 750px

So, if you want the elements to be horizontal no matter what the screen size is, then we need to use col-xs-* values.

Hope this helps.

Upvotes: 1

Related Questions