How to display input buttons on one line in Bootstrap?

Question

I've made a small little Bootstrap panel, and I have 3 Bootstrap buttons in the panel at the bottom. What I'm trying to do is make all the buttons be on one line and have a small gap, not bunched together. Here's what I have right now, and here's what it's doing:

.recent 
{
    margin-top: 50px;
    margin-right: 500px;
}

.recent input
{
    float: left;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="recent">
                <div class="container">
                    <div class="col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
                            <div class="panel-body">
                                <p>- Aurora, Colorado : Blah Blah Blah</p>
                                <input type="button" value="View all" onClick="#" class="btn btn-primary">
                                <input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger">
                                <input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

What's happening is this:

https://gyazo.com/46b7c219adc26be516475c8f3b4d803d

Is there any way to make them stay on one line, or would I have to make the column larger?

Answer 1

Here are few points.

1. Why are you giving 500 margin right to recent class? it will create problem in responsiveness. Even if you are targeting only desktop screen it is not good practice. 500 margin forcing to reduce width of recent.

2. you are using col-lg-3 It might be fine to use col-lg-3 for larger screens more than 1200px wide.. for small screens there are col-md-3, col-sm-3 and col-xs-3

3. Give a little margin-right to buttons so that they have a little space.

.recent 
{
    margin-top: 50px;
}

.recent input
{
    float: left;
}
.m-right{
    margin-right:5px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="recent">
                <div class="container">
                    <div class="col-sm-6">
                        <div class="panel panel-primary">
                            <div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
                            <div class="panel-body">
                                <p>- Aurora, Colorado : Blah Blah Blah</p>
                                <input type="button" value="View all" onClick="#" class="btn btn-primary m-right">
                                <input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger m-right">
                                <input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning m-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 2

You can try this code

<div class="recent">
                <div class="container">
                     <div class="row">

                        <div class="panel panel-primary">
                            <div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
                            <div class="panel-body">
                                <p>- Aurora, Colorado : Blah Blah Blah</p>
                                <div class="col-lg-2"><input type="button" value="View all" onClick="#" class="btn btn-primary"></div>
                                <div class="col-lg-2"><input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger"></div>
                                <div class="col-lg-2"><input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 3

you can also achieve with out using float property. You use display:inline-block instead of float.

or you use 3 multiple division(.col-sm, .col-md, .col-lg) in .row or .container

Answer 4

You'll need to make the column width wider. Since you're using col-lg-3 class, the last button is wrapping to the next line. Try changing it to a larger column (i.e. col-lg-6). To answer the second part of your question, you can add a CSS rule like .btn {margin: 0 5px;} if you want some space between the buttons.