Use Fieldset Legend with bootstrap

Question

I m using Bootstrap for my JSP page   I want to use  lt fieldset gt  and  lt legend gt  for my form  This is my code    lt fieldset class  scheduler-border  gt       lt legend class  scheduler-border  gt Start Time lt  legend gt       lt div class  control-group  gt           lt label class  control-label input-label  for  startTime  gt Start   lt  label gt           lt div class  controls bootstrap-timepicker  gt               lt input type  text  class  datetime  id  startTime  name  startTime  placeholder  Start Time    gt               lt i class  icon-time  gt  lt  i gt           lt  div gt       lt  div gt   lt  fieldset gt    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   I want output in the following way    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  lt fieldset gt  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

User · Answer

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:

The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
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
}

User · Answer

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

User · Answer

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

User · Answer

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    lt fieldset class  border p-2  gt      lt legend  class  w-auto  gt Your Legend lt  legend gt   lt  fieldset gt    which looks like this

User · Answer

I had a different approach   used bootstrap panel to show it little more rich  Just to help someone and improve the answer    x000D   x000D   text-on-pannel   x000D    background   fff none repeat scroll 0 0  x000D    height  auto  x000D    margin-left  20px  x000D    padding  3px 5px  x000D    position  absolute  x000D    margin-top  -47px  x000D    border  1px solid  337ab7  x000D    border-radius  8px  x000D    x000D   x000D   panel   x000D       for text on pannel    x000D    margin-top  27px  important  x000D    x000D   x000D   panel-body   x000D    padding-top  30px  important  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  container  gt  x000D     lt div class  panel panel-primary  gt  x000D       lt div class  panel-body  gt  x000D         lt h3 class  text-on-pannel text-primary  gt  lt strong class  text-uppercase  gt  Title  lt  strong gt  lt  h3 gt  x000D         lt p gt  Your Code  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div gt  x000D   x000D   x000D    This will give below look    Note  We need to change the styles in order to use different header size

[html] Use Fieldset Legend with bootstrap

Examples related to html

Examples related to css

Examples related to forms

Examples related to twitter-bootstrap