217

I'm using Bootstrap for my JSP page.

I want to use <fieldset> and <legend> for my form. This is my code.

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS is

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
}

I am getting output like this enter image description here

I want output in the following way

enter image description here

I tried adding

border:none;
width:100px;

to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.

So what shall I do to get output like I have mentioned? (Without striking the legend text)

4
  • The code you shared seems to work fine. Here's a Fiddle
    – Menno
    May 31, 2013 at 8:00
  • 5
    @Aquillo your Fiddle isn't using Bootstrap. May 31, 2013 at 8:10
  • 1
    @JamesDonnelly Noticed it too that this is caused by Bootstrap ;)
    – Menno
    May 31, 2013 at 8:31
  • 1
    I think you should consider to use Bootstrap's panel. It has very similar behavior like fieldset and legend, but more stylish. Jan 10, 2017 at 14:25

8 Answers 8

245

That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

JSFiddle example.

You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.

You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.

2
  • 2
    Ftr: for me Bootstrap 3.3.6 also set a margin-bottom: 20px; on the legend, which pushed it above the fieldset border, instead of placing it on the line. Setting the margin-bottom: 0; on the custom legend.scheduler-border fixed that easily.
    – dtk
    Feb 22, 2016 at 11:30
  • Thanks. I added "width: initial;" to my css which was I used for my Legend class. I figured this might be better. I get tired of fighting against bootstrap to stop it from messing stuff up! I had 3 different boot strap type css files that all was messing it up. But now its fixed.
    – John Foll
    May 23, 2023 at 22:40
157

In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

which looks like this: bootstrap 4 fieldset and legend

4
  • 6
    w-auto is not available in Bootstrap 4.0, but it is available in 4.1+
    – dlauzon
    Dec 10, 2019 at 20:01
  • 2
    This is the simplest solution on here. I would recommend this to any one. Nov 15, 2020 at 6:37
  • 16
    For bootstrap 5, you need to add this style as well . legend{ float: none; padding: inherit; } Dec 23, 2020 at 15:03
  • What are the benefits of using fieldset and legend in forms?
    – carloswm85
    Jul 27, 2022 at 22:26
42

In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:

<fieldset class="border p-2">
   <legend  class="float-none w-auto">Your Legend</legend>
</fieldset>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
   <legend  class="float-none w-auto p-2">Your Legend</legend>
   <input type="text">
</fieldset>
</form>

0
22

I had this problem and I solved with this way:

fieldset.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}
18

I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

This will give below look. enter image description here

Note: We need to change the styles in order to use different header size.

8

Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.

There seems to be two problems of fieldset with bootstrap:

  1. The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
  2. There's a bottom border for the legend.

So, all we need to fix this is set the legend width to auto as follows:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}
1

fieldset.scheduler-border {
  border: 1px groove #ddd !important;
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #000;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
  color: black;
}
<div class="container">
    <fieldset class="scheduler-border">
        <legend class="scheduler-border">Technical Ameen</legend>
        <h2>Your Work Here</h2>
    </fieldset>
</div>

if you will not find any proper solution for using legend tag in bootstrap 5

you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.

style="margin-top:-15px; background-color: white; color: black;"

also, add this line in the fieldset tag for margin-top

 style="margin-top: 30px !important;"

enter image description here

I hope this is a very simple solution for getting legend style with bootstrap 5

0
<fieldset  class="border p-2 form-group">
   <legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>

use css:

.customer-legend:before {
    left: 100px;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.