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.

table

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 *