CODEWITHSUNDEEP
htmlbootstrap-4jinja2flask-wtforms
d1spstack
d1spstack

Reputation: 1380

Flask wtforms radio button style not appearing as bootstrap sample

I cant figure out why my flask-wtform radio button isn't appearing in the same style as the bootstrap example. I'm using jinja templates in my html. I have imported all the stylesheets (other components of site are also using bootstrap and they work fine) and wrapped the radio form inside and added the class "form-check-input" to the radio form but still it looks different. This is my html file

                    <div class="col">
                        <div class="form-check">
                        <b>{{result_form.login_area.label}}</b>
                        {{result_form.login_area(class="form-check-input")}}
                        </div>
                    </div>

and this is the bootstrap example

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

And here is how the form looks like in my webpage

enter image description here

This is how it should look like

enter image description here

Upvotes: 0

Views: 651

Answers (1)

Fred
Fred

Reputation: 9

After searching for hours for this issue my self I found the answer here: Radio button strange "extra" dot on the side

In my project where I do not have a seperate css (yet), I created at the bottom of my base.html (your template html file) a section where I put the ul styling in. Like this:

   <style>
     ul{
        list-style-type: none;
     }
  </style>

Refresh the page a the list item dots are gone.

Upvotes: 1

Related Questions