Tech Stuff

Bootstrap 3 Tables Tip

I was trying to do a radio-button select form for an evaluation, the kind where there’s a question and then a series of buttons for “agree,” “somewhat agree” and “disagree.”

The default Bootstrap code made it a mess, so here are a few styles you can add to neaten it up.

.radio { text-align: center; }
.radio label { padding-left: 0 }
.radio input[type="radio"] {
  margin-left: auto;
  margin-right: auto;
  position: inherit;;
}
th { text-align:  center }

Maybe add a class to your table and prepend that to each:

<table class="table table-striped formtable">
<thead>
<tr><th class="col-sm-4"></th><th class="col-sm-1">Agree</th><th class="col-sm-1">Somewhat agree</th><th class="col-sm-1">Disagree</th></tr>
</thead>
<tbody>

And css:

.formtable .radio { text-align: center; }

and so on.

Leave a Reply

Your email address will not be published. Required fields are marked *