Use Fieldset Legend with bootstrap

by

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.

More Related Contents:

  1. Bootstrap height
  2. Inline Form nested within Horizontal Form in Bootstrap 3
  3. How to place a div over a image? [closed]
  4. Setting columns in bootstrap grid
  5. What is sr-only in Bootstrap 3?
  6. Table fixed header and scrollable body
  7. How do I change Bootstrap 3 column order on mobile layout?
  8. Google Chrome form autofill and its yellow background
  9. Twitter Bootstrap 3, vertically center content [duplicate]
  10. Bootstrap 3 two columns full height
  11. Animate/Shrink NavBar on scroll using Bootstrap
  12. Is there a way to style part of an input field’s value? [duplicate]
  13. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  14. 7 equal columns in bootstrap
  15. How to disable the resize grabber of ? [duplicate]
  16. Form inline inside a form horizontal in twitter bootstrap?
  17. Bootstrap print CSS removes background color
  18. Bootstrap navbar link color won’t change
  19. Empty vertical space between columns in Bootstrap 4
  20. Responsive image align center bootstrap 3
  21. How to align texts inside of an input?
  22. Bootstrap Grid, do I need a container?
  23. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  24. Bootstrap 3 – show collapsed navigation for all screen sizes
  25. Can you style html form buttons with css?
  26. How to make bootstrap carousel image responsive?
  27. Styling autocomplete dropdowns in browsers
  28. Why aren’t my bootstrap 4 columns the same height?
  29. Bootstrap 5 layout for different sizes cards – like Pinterest
  30. Make input element (type=”text”) handle multiple lines of text

Leave a Comment