Designing a data grid using Bootstrap

Question

I am working on a Grid and designing using bootstrap 3.

I am using html5, css and bootstrap using React.js.

I have a data grid and (My Grid is a table with fixed data)

• filter input

• pagination tool

• and three small buttons that change the same state in my grid (no matter what they do, but they need to be seen every time).

My grid width can sometimes be very small, and sometimes it can be very large.

• I want the filter input to be in the upper left corner of the grid.

• 3 buttons are located in the upper right corner of the grid.

• the pagination tool will always be in the center of the bottom of the grid

, . , 3 , .

:

<div>
  <div className="col-xs-2">
   <input type="text" className="form-control"  placeholder='Filter' />
  </div>

 <div className="pull-center">
    <button type="button" className="btn btn-sm btn-default" >o</button>
    <button type="button" className="btn btn-sm btn-warning">o</button>
    <button type="button" className="btn btn-sm btn-danger">o</button>
 </div> 
 <div className="col-xs-12">
       <Table>  
       </Table>          
      <PagerDemo/> 
  </div>
</div> 

. ? - ?

Answer 1

, , :

<div class="row">
  <div class="col-xs-7">
    <input type="text" class="form-control">
  </div>
  <div class="col-xs-5">
    <div class="row">
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
    </div>
  </div>
</div>

, . .

.pagination { display: block; }
.pagination .page-link { text-align: center; }
.pagination-1 { width: 100%; }      /* 100 / 1 */
.pagination-2 { width: 50%; }       /* 100 / 2 */
.pagination-3 { width: 33.33%; }    /* 100 / 3 */
/* ... */
.pagination-7 { width: 14.28%; }    /* 100 / 7 */

pagination pagination-3 pagination 3 , pagination pagination-4 .. javascript .page-link.