align button items on top of a table with twitter bootstrap

Question

I am trying to align some button and a input box with a table. Previous day and next day may or may not be present on the page depending on if a day exists. Below is by start code, current output and desired output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  </head>

  <body>


    <div class="container">
        <form class = "form-inline" >
            <h1>some data</h1>
            <br>
            <button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button>
            <input type='text' READONLY name = 'pageDate' value = '2013-05-18' />
            <button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
            <br>
            <br>
            <table class = "table table-striped">

            <th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
            </table>
        </form>
    </div> <!-- /container -->



  </body>
</html>

Current Output

enter image description here

Desired Output

enter image description here

Edit:

I tried Accipheran answer and got the result below. Also added code to jsFiddle http://jsfiddle.net/Y9SLs/1/

enter image description here

score 1 · Answer 1 · answered Jun 18 '13 at 12:03

1

I would give the next-day button a class of pull-right (a bootstrap class) and the date field a class of center (custom class) where center is defined as

.center {

    float: none;
    display: table;
    margin: 0 auto;
}

Think that should work

answered Jun 18 '13 at 12:03

Peter Berg

6,006
8
37
51

Pull-Right did the job, but I can't get the .center css to work – Richard Jun 18 '13 at 12:14
hmm, I'm not exactly an html/css wizard so I'm not sure why that might be the case. You could try setting display to absolute instead of table. Also this question might help http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally – Peter Berg Jun 18 '13 at 12:23

Richard · Accepted Answer · 2013-06-18T15:22:53.077

In addition to Accipheran's answer I used Twitters grid system to get the desired result. Code Below:

HTML

  </head>

  <body>


    <div class="container">
        <form class = "form-inline" >
            <h1>some data</h1>
            <div  class = "row">
                <div class = "span4">
                    <button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button>
                </div>
                <div class = "span4">
                    <input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' >
                </div>
                <div class = "span4">
                    <button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
                </div>
            </div>
            <br>
            <div class = "row">
                <div class = "span12">
                    <table class = "table table-striped">
                        <th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
                    </table>
                </div>
            </div>
        </form>
    </div> <!-- /container -->



  </body>
</html>

Additional CSS

input.center {

float: none;
display: table;
margin: 0 auto;

}

align button items on top of a table with twitter bootstrap

2 Answers2