CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Richard
Richard

Reputation: 15872

align button items on top of a table with twitter bootstrap

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

Upvotes: 1

Views: 3343

Answers (2)

Richard
Richard

Reputation: 15872

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;

}

Upvotes: 1

Peter Berg
Peter Berg

Reputation: 6206

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

Upvotes: 1

Related Questions