{"id":2234,"date":"2022-10-26T22:41:42","date_gmt":"2022-10-26T14:41:42","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=2234"},"modified":"2022-10-26T22:41:42","modified_gmt":"2022-10-26T14:41:42","slug":"rendering-multiple-checkboxes-with-wtforms-and-bootstrap","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/rendering-multiple-checkboxes-with-wtforms-and-bootstrap\/","title":{"rendered":"Rendering multiple checkboxes with WTForms and Bootstrap"},"content":{"rendered":"

When you use WTForms<\/a> and Bootstrap<\/a>, you can quickly build up the dashboard for your own content management system with Python<\/a>.<\/p>\n

This is because WTForms provide several out-of-the-box implementations for rendering some basic fields<\/a> that for capturing form data.<\/p>\n

However, rendering multiple checkboxes can be open to different UI implementations based on users' preferences. Therefore, different fields<\/a> and widgets<\/a> are available in WTForms to cater for different ways of displaying a form input to the user.<\/p>\n

Given these points, let's see how we can render multiple checkboxes with WTForms and Bootstrap.<\/p>\n

Rendering multiple checkboxes with WTForms only<\/h2>\n

First, let us look at a sample implementation of rendering a list of checkboxes with WTForms<\/a>.<\/p>\n

If we render MultiCheckboxField without any CSS styling, we get a dotted list of checkboxes.<\/p>\n

\"sample<\/p>\n

Given that, we know that the sample implementation had rendered an unordered list of checkboxes.<\/p>\n

Implementing a WTForms field to display a list of checkboxes with Bootstrap's list group component<\/h2>\n

Since the sample implementation renders our checkboxes as an unordered list of checkboxes, the HTML structure bodes well with Bootstrap's list group component<\/a>.<\/p>\n

Including own CSS classes to the different HTML tags rendered by ListWidget<\/h3>\n

Once we had decided on the Bootstrap component to use, we can look at how we can insert the relevant Bootstrap classes into our HTML elements.<\/p>\n

In order to achieve the list group component styling, we need to render:<\/p>\n