A Simple Bootstrap Check Box for Web Forms
A Simple Bootstrap Check Box for Web Forms
In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.
Simple Check Box
As a way to get a better looking check box, you can wrap a check box into a button as shown in Figure 1. What is nice about this style of check box is it really puts the label together with the check box. In addition, on a mobile device it is much easier to hit as the whole button area is clickable.
To create these check boxes you simply have to wrap the check box within the normal Bootstrap class “checkbox”. You then add a label element with the classes “btn btn-default” around the check box as shown in the following code:
<div class="form-group">
<div class="checkbox">
<label class="btn btn-default">
<asp:CheckBox ID="IsJazz" runat="server"
Text="Jazz" />
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label class="btn btn-default">
<asp:CheckBox ID="IsCountry" runat="server"
Text="Country" />
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label class="btn btn-default">
<asp:CheckBox ID="IsRock" runat="server"
Text="Rock" />
</label>
</div>
</div>
To make it appear correctly, you have to add the following CSS to align the check box and the text correctly within the button. That is all there is to it!
<style>
.checkbox .btn,
.checkbox-inline .btn {
padding-left: 2em;
min-width: 8em;
}
.checkbox label,
.checkbox-inline label {
text-align: left;
padding-left: 0.5em;
}
</style>
Summary
Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.
Past Blog Content
Blog Archive
-
2015
-
2014 (18)
-
2013 (11)
-
2012 (19)
-
2011 (29)
-
2010 (19)
-
2009 (28)
-
2008 (0)
-
2007 (14)
-
2006 (6)