Bootstrap buttons inline on mobile - html

Question

I am trying to get two buttons on the same line on mobile. The buttons are on the same line for the desktop but as soon as it goes mobile they stack on top of each other. I have tried adding an inline-block tag to the div class but they still stacked, albeit at the correct 50 50 size.
Here is my html:
<div class="buttonDiv">
<div class="row">
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
</div>
</div>
</div>
and here is the relevant CSS:
.buttonDiv{
position:relative;
bottom:90px;
font-family: "Cabin Condensed";
font-weight:700;
display:inline-block;
}
#buttonCustom{
position:relative;
margin-bottom:10px;
height:10%;
width:100%;
}

Answer 1

css looks like an overkill, unless OP solves some other design task (s)he didn't mention in the question.
If all you want is to keep 2 buttons inline on any device you can get away with...
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary">SIGN UP</button>
<button class="btn btn-primary">CHECK STANDINGS</button>
</div>
</div>
... and no additional css required.
fiddle.

Answer 2

Bootstrap has the classes xs for phones, and sm for tablets. You actually only need to add col-xs-6 to both your classes as this will affect all other widths unless otherwise stated. From the bootstrap docs:
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

Answer 3

add col-sm-6 col-xs-6 to the two btns. This indicates that when the screen is small size or xsmall size. They maintain 50% width.

Answer 4

You could look into this JsFiddle.
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Sign Up</button>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Check Standings</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
CSS
.my-button{
width:100%;
}
You can paly with the values of classes of these lines <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">. To understand this grid-system you can look at the official documentation. Happy Coding.