Today’s web design resource is a template with 2 examples of using form fieldsets and legends in Bootstrap.
I’ve already created a similar resource in the past which you can find here. This time I’m using the latest Bootstrap 5!
Below you can see the code for one of the examples, image previews, live previews, and download link. I hope you like!
Want to Save this Article?
Example 1: Fieldset + Legend Form on White Background
A form with 3 fieldsets and 3 legends: User Credentials, User Description, and User Preferences.
The HTML Code (only for the form)
<form action="" method="post">
<!-- User Credentials -->
<fieldset class="border p-3 mb-4">
<legend class="mb-3 azm-color-444">User Credentials</legend>
<div class="mb-3">
<label for="username" class="form-label azm-color-666">Username:</label>
<input type="text" id="username" class="form-control" placeholder="Enter a Username..." name="username">
</div>
<div class="mb-3">
<label for="email" class="form-label azm-color-666">Email:</label>
<input type="email" id="email" class="form-control" placeholder="Enter an Email address..." name="email">
</div>
<div class="mb-3">
<label for="password" class="form-label azm-color-666">Password:</label>
<input type="password" id="password" class="form-control" placeholder="Choose a Password..." name="password">
</div>
</fieldset>
<!-- User Description -->
<fieldset class="border p-3 mb-4">
<legend class="mb-3 azm-color-444">User Description</legend>
<div class="mb-3">
<label for="about-you" class="form-label azm-color-666">About You:</label>
<textarea id="about-you" class="form-control" name="about-you" placeholder="Enter a short description..." rows="3"></textarea>
</div>
</fieldset>
<!-- User Preferences -->
<fieldset class="border p-3 mb-4">
<legend class="mb-3 azm-color-444">User Preferences</legend>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="preferences" id="daily" value="daily">
<label class="form-check-label azm-color-666" 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 azm-color-666" 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 azm-color-666" for="monthly">I want <strong>monthly</strong> emails</label>
</div>
</div>
</fieldset>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary btn-lg azm-btn-primary"><i class="bi bi-envelope" aria-hidden="true"></i> Subscribe</button>
</form>
The CSS Code (only for the form)
I’ve tried using as much ready-to-use Bootstrap CSS classes as possible. But we have to override some styles to match our project design. Here I’ve restyled the submit button and input fields:
/* Restyling Bootstrap submit button */
.btn.azm-btn-primary { background-color: #dd72a6; border-color: #dd72a6; }
.btn.azm-btn-primary:hover { background-color: #AF2D6D; border-color: #AF2D6D; }
.btn.azm-btn-primary:active { background-color: #AF2D6D; border-color: #AF2D6D; }
.btn.azm-btn-primary:focus { background-color: #AF2D6D; border-color: #AF2D6D; color: #fff; }
.btn.azm-btn-primary:active:focus { background-color: #AF2D6D; border-color: #AF2D6D; color: #fff; }
.btn.azm-btn-primary:focus-visible {
background-color: #AF2D6D;
border-color: #AF2D6D;
box-shadow: 0 0 0 0.25rem rgba(221, 114, 166, .5);
}
/* Form 1 */
#section-1 .form-control:focus {
border-color: #dd72a6;
box-shadow: 0 0 0 0.25rem rgba(221, 114, 166, .5);
}
#section-1 .form-check-input:checked {
background-color: #dd72a6;
border-color: #dd72a6;
}
#section-1 .form-check-input:focus {
border-color: #dd72a6;
box-shadow: 0 0 0 0.25rem rgba(221, 114, 166, .5);
}
Example 2: Fieldset + Legend Form on Fullscreen Image Background
A form with 3 fieldsets and 3 legends: Current Occupation, Your Address, and Job Preferences.
Demo and Download
DOWNLOAD: