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.

Tom

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he’s also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

Leave a Reply

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