Bootstrap Fieldset Legend: How To + Examples + Template

We have already seen how to use fieldsets in forms with the Bootstrap framework.

Today we will continue on the same lines and learn how to create fieldsets with legends.

These can come in handy when working with long forms that need to collect a lot of data.

Actually, in the article I mentioned above, we have already used legends, but today we are going to expand on them and see how we can style them a bit differently.

So, let’s see what these fieldset legends are and how to use them!

Template and demo link available at the end.

Introduction

What are Fieldsets?

Fieldsets are a set or collection of input fields in a form, used on a web page to collect user data.

What are Legends?

Legends are simply titles (also known as “captions”) that are added to the fieldsets to distinguish them from each other, thus improving UX.

How are they styled?

“Fieldsets + Legends” are usually styled with a border that wraps the fieldset elements inside it, and the legend as a title on top of it.

So we are going to use this type of style here too, differently from the article I mentioned at the beginning of this post.

Which version of Bootstrap we’ll use?

We are going to use Bootstrap v4.5.3.

Example 1

The first example has 2 center-aligned “fieldsets + legends”. The legends are aligned on the left.

Below is a preview image.

Let’s begin with the HTML code.

The HTML

You can find the HTML code, as usual, in the file “index.html”. I’ll only show the code for the forms here, not for the other sections of the page which are not relevant to this tutorial.

Below is the code for our first form:

<!-- Form 1 -->
<div class="form-1-container section-container">
    <div class="container">
        <div class="row">
            <div class="col form-1 section-description wow fadeIn">
                <h2>Form 1</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
                <p>A form with 2 "fieldset"-s and 2 "legend"-s: "User's credentials" and "User's preferences".</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 offset-md-1 form-1-box wow fadeInUp">

                <form action="" method="post">
                    <!-- User's Credentials  -->
                    <fieldset class="form-group border p-3">
                        <legend class="w-auto px-2">User's Credentials</legend>
                        <div class="form-group">
                            <label for="username">Username:</label>
                            <input type="text" class="form-control username" id="username" placeholder="Username..." name="username">
                        </div>
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" class="form-control email" id="email" placeholder="Email..." name="email">
                        </div>
                        <div class="form-group">
                            <label for="password">Password:</label>
                            <input type="password" class="form-control password" id="password" placeholder="Password..." name="password">
                        </div>
                    </fieldset>
                    <!-- User's Preferences  -->
                    <fieldset class="form-group border p-3">
                        <legend class="w-auto px-2">User's Preferences</legend>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="preferences" id="daily" value="daily">
                            <label class="form-check-label" for="daily">I want <strong>daily</strong> emails</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="preferences" id="weekly" value="weekly">
                            <label class="form-check-label" for="weekly">I want <strong>weekly</strong> emails</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="preferences" id="monthly" value="monthly">
                            <label class="form-check-label" for="monthly">I want <strong>monthly</strong> emails</label>
                        </div>
                    </fieldset>
                    <!-- Submit Button  -->
                    <div class="form-group row text-right">
                        <div class="col">
                            <button type="submit" class="btn btn-primary btn-customized">Subscribe</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

As you can see, we have created a simple form by following mainly the documentation of Bootstrap forms and using the Bootstrap grid system.

Also, we use some Bootstrap utilities for spacing (classes “p-3”, “px-2”), borders (class “border”), and for text alignment (class “text-right”).

The CSS

We style the form with some CSS code in the file “style.css” (folder “/assets/css/”).

You can also keep the default Bootstrap style and not override it if you like.

Here is the code:

.form-1-box { padding-top: 30px; text-align: left; }

.form-1-box legend {
    font-size: inherit;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
}

.form-1-box .form-check-label {
    line-height: 1.5;
    vertical-align: top;
}

.form-1-box input[type="text"],
.form-1-box input[type="email"],
.form-1-box input[type="password"] {
    background: none;
    border: 1px solid #ddd;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #888;
    box-shadow: none;
}

.form-1-box input[type="text"]:focus,
.form-1-box input[type="email"]:focus,
.form-1-box input[type="password"]:focus {
    outline: 0;
    background: none;
    border: 1px solid #db5d50;
    box-shadow: none;
}

.form-1-box input[type="text"]::-moz-placeholder,
.form-1-box input[type="email"]::-moz-placeholder,
.form-1-box input[type="password"]::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box input[type="text"]:-ms-input-placeholder,
.form-1-box input[type="email"]:-ms-input-placeholder,
.form-1-box input[type="password"]:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box input[type="text"]::-webkit-input-placeholder,
.form-1-box input[type="email"]::-webkit-input-placeholder,
.form-1-box input[type="password"]::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box button.btn-customized {
    margin-top: 1rem;
    padding: .75rem 1.5rem;
    background: #db5d50;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: none;
}

.form-1-box button.btn-customized:hover, 
.form-1-box button.btn-customized:active, 
.form-1-box button.btn-customized:focus, 
.form-1-box button.btn-customized:active:focus, 
.form-1-box button.btn-customized.active:focus,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #ca594d;
    border: 0;
    color: #fff;
    box-shadow: none;
}

– – – –

Don’t miss: Bootstrap 4: How To Center Align a “Div” or “Form” Vertically and Horizontally

Example 2

Here we have 3 “fieldsets + legends”, that are aligned next to each other.

Below you can see a preview image (click on the image to view it full size).

The HTML

Below you can see the HTML code for this example:

<!-- Form 2 -->
<div class="form-2-container section-container section-container-gray-bg">
    <div class="container">
        <div class="row">
            <div class="col form-2 section-description wow fadeIn">
                <h2>Form 2</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
                <p>A form with 3 "fieldset"-s and 3 "legend"-s: "First / Last name", "About" and "Preferences".</p>
            </div>
        </div>
        <div class="row">
            <div class="col form-2-box wow fadeInUp">

                <form action="" method="post">

                    <div class="row">
                        <div class="col-md-6">
                            <!-- First / Last Name -->
                            <fieldset class="form-group border p-3">
                                <legend class="w-auto px-2">First / Last Name</legend>
                                <div class="form-group">
                                    <label for="firstname">First name:</label>
                                    <input type="text" class="form-control firstname" id="firstname" placeholder="First name..." name="firstname">
                                </div>
                                <div class="form-group">
                                    <label for="lastname">Last name:</label>
                                    <input type="text" class="form-control lastname" id="lastname" placeholder="Last name..." name="lastname">
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-md-6">
                            <!-- About -->
                            <fieldset class="form-group border p-3">
                                <legend class="w-auto px-2">About You</legend>
                                <div class="form-group">
                                    <label for="about">About:</label>
                                    <textarea class="form-control about" id="about" placeholder="Tell us about you..." name="about"></textarea>
                                </div>
                            </fieldset>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <!-- Preferences  -->
                            <fieldset class="form-group border p-3">
                                <legend class="w-auto px-2">Preferences</legend>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="john" id="john" value="john">
                                    <label class="form-check-label" for="john">I want to subscribe to <strong>John's</strong> newsletter</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="sarah" id="sarah" value="sarah">
                                    <label class="form-check-label" for="sarah">I want to subscribe to <strong>Sarah's</strong> newsletter</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="paolo" id="paolo" value="paolo">
                                    <label class="form-check-label" for="paolo">I want to subscribe to <strong>Paolo's</strong> newsletter</label>
                                </div>
                            </fieldset>
                        </div>
                    </div>

                    <!-- Submit Button  -->
                    <div class="form-group row">
                        <div class="col">
                            <button type="submit" class="btn btn-primary btn-customized">Subscribe</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

Here we have 3 fieldsets instead of two, and we use the classes of the Bootstrap grid (rows and columns) to align these fieldsets as needed.

The CSS

The CSS code is very similar to the first example so I’ll not show it here. You can find it in the “style.css” file.

Example 3

This example has 3 center-aligned “fieldsets + legends”, with the legends aligned on the center of the form.

Below is the preview image (click on the image to view it full size).

The HTML

This is the HTML code for this form:

<!-- Form 3 -->
<div class="form-3-container section-container section-container-image-bg">
    <div class="container">
        <div class="row">
            <div class="col form-3 section-description wow fadeIn">
                <h2>Form 3</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
                <p>A form with 3 "fieldset"-s and 3 "legend"-s: "Current occupation", "Your address" and "Job preferences".</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 offset-md-1 form-3-box text-center wow fadeInUp">

                <form action="" method="post">
                    <!-- Current Occupation  -->
                    <fieldset class="form-group p-3">
                        <legend class="w-auto px-2">Current Occupation</legend>
                        <div class="form-group text-left">
                            <label for="job-title">Job title:</label>
                            <input type="text" class="form-control job-title" id="job-title" placeholder="Job title..." name="job-title">
                        </div>
                        <div class="form-group text-left">
                            <label for="job-description">Job description:</label>
                            <textarea class="form-control job-description" id="job-description" placeholder="Job description..." name="job-description"></textarea>
                        </div>
                        <div class="form-group text-left">
                            <label for="salary">Salary:</label>
                            <input type="text" class="form-control salary" id="salary" placeholder="Salary..." name="salary">
                        </div>
                    </fieldset>
                    <!-- Your Address  -->
                    <fieldset class="form-group p-3">
                        <legend class="w-auto px-2">Your Address</legend>
                        <div class="form-group text-left">
                            <label for="address">Address:</label>
                            <input type="text" class="form-control address" id="address" placeholder="Address..." name="address">
                        </div>
                        <div class="form-group text-left">
                            <label for="zip-code">ZIP code:</label>
                            <input type="text" class="form-control zip-code" id="zip-code" placeholder="ZIP code..." name="zip-code">
                        </div>
                        <div class="form-group text-left">
                            <label for="city">City:</label>
                            <input type="text" class="form-control city" id="city" placeholder="City..." name="city">
                        </div>
                        <div class="form-group text-left">
                            <label for="state">State:</label>
                            <input type="text" class="form-control state" id="state" placeholder="State..." name="state">
                        </div>
                    </fieldset>
                    <!-- Job Preferences  -->
                    <fieldset class="form-group p-3">
                        <legend class="w-auto px-2">Job Preferences</legend>
                        <div class="form-group text-left">
                            <label for="preferences">Preferences:</label>
                            <textarea class="form-control preferences" id="preferences" placeholder="Preferences..." name="preferences"></textarea>
                        </div>
                        <div class="form-group text-left">
                            <label for="new-salary">New salary:</label>
                            <input type="text" class="form-control new-salary" id="new-salary" placeholder="New salary..." name="new-salary">
                        </div>
                    </fieldset>
                    <!-- Submit Button  -->
                    <div class="form-group row">
                        <div class="col">
                            <button type="submit" class="btn btn-primary btn-customized">Send Application</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

The form is very similar to the other two examples. We use the Bootstrap classes “text-center” and “text-left” to center-align the legends and left-align the input fields’ labels.

The CSS

In this case, I have used a dark image background so the form elements must have light colors. We achieve this with some CSS code that you can find in the “style.css” file.

Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Fieldset Legend Examples (3243 downloads )

LICENSE:
You can use this template as you like, in personal or commercial projects. Just do not sell it as is.

Conclusion

Following the Bootstrap documentation and with some small code tweaks, we just created 3 forms that use fieldsets and fieldset legends to organize the input fields for a clear and improved user experience.

That’s all for this tutorial. Let me know if you have any questions or suggestions in the comments below.