Use Fieldset Legend with Bootstrap

Use Fieldset Legend with bootstrap

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.

Override Bootstrap 5 fieldset style

Any css can be reset to its default by using revert:

fieldset, legend {
   all: revert;
}

.reset {
    all: revert;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<fieldset>
    <legend>Legend</legend>
</fieldset>

<fieldset class="reset">
    <legend class="reset">Reset legend</legend>
</fieldset>

Bootstrap - Adding legend to well

Put the .well on the fieldset and override Bootstrap's legend and fieldset styles.

HTML

<form>
    <fieldset class="well the-fieldset">
        <legend class="the-legend">Your legend</legend>
        ... your inputs ...
    </fieldset>
</form>

CSS

.the-legend {
    border-style: none;
    border-width: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}
.the-fieldset {
    border: 2px groove threedface #444;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

NOTE: I've ommited Bootstrap classes like rows, spans, controls, etc. Use them to fit your layout.

EDIT: Changed code to include fieldset styles "reset".

Legend Tag Not Rendering Correctly With Bootstrap Grid

Here's a way using custom CSS. Just add this CSS, and add .customLegend to the fieldset that will have a legend you want to display this way. Adjust the positioning, padding, etc as needed.

.customLegend {

  border: 1px solid #e5e5e5;

  padding: 2em 0 1em;

  margin-top: 2em;

  position: relative;

}

.customLegend legend {

  border: 0;

  background: #fff;

  width: auto;

  transform: translateY(-50%);

  position: absolute;

  top: 0; left: 1em;

  padding: 0 .5em;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <form>

    <fieldset class="customLegend row">

      <legend>Enter Your Name</legend>

      <div class="form-group col-sm-6">

        <label for="first_name">First Name:</label>

        <input type="text" class="form-control" id="email">

      </div>

      <div class="form-group col-sm-6">

        <label for="last_name">Last Name:</label>

        <input type="text" class="form-control" id="pwd">

      </div>

    </fieldset>

    

    <div class="form-group">

      <label for="email">Email address:</label>

      <input type="email" class="form-control" id="email">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd">

    </div>

    

    <button type="submit" class="btn btn-default">Submit</button>

  </form>

</div>

Bootstrap Fieldset Legend is getting Covered by Panel Panel-default completely

You can use row class in bootstrap.try this

<div class="container">
        <div class="row">

         <div class="enquiry">
            <fieldset class="col-md-12">
                .................................
            </fieldset> 
            <fieldset class="col-md-12 margin-bottom">
                ........................................
            </fieldset>
          </div>    
        </div>
        <div class="row">

            <h1>
              Add Here your content
            </h1>

        </div>

    </div>

How can i change the border of fieldset in Bootstrap 4.2?

You should fix how you're importing your Bootstrap as well, but when I removed .border, your CSS worked after adding !important to make sure it overrides the inherited Bootstrap CSS.

fieldset {
  border: 2px solid blue !important;
}

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>

  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
  </fieldset>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
  </fieldset>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

Fieldset not rendering correctly under Twitter Bootstrap

This will undoutably not be the answer you were hoping for, but I can think of only one option that will help render the fieldset and legend elements as you want when you're including bootstrap in your project:

There is a CSS property call all that has several values that you can set on it. You can read up on it here. The value you'd be interested in though is initial. So a class with a property all: initial; will reset all of the selected element's properties to their initial values as defined in the CSS spec. After that you would have to style the legend and fieldset elements to how you want them rendered. I've provided some working code that will get you started. You can see it in action here. Please note bootstrap is in this environment if you delete all of the CSS, you'll see bootstraps styling rendered.

Sample HTML:

<fieldset class="reset-this redo-fieldset" style="margin-left: 10px;">
    <legend class="reset-this redo-legend">Name</legend>
    First Name: <input type="text"><br>
    Last Name: <input type="text"><br>
</fieldset>

Sample CSS:

.reset-this {
  all: initial;
}

.redo-fieldset {
  border: 1px solid black;
  padding : 10px;
} 

.redo-legend {
  color: black;
} 

Reset fieldset and legend behaviour after embeding twitter bootstrap

You really just need to overwrite the Bootstrap styling in your own style sheet Something like the below should do the trick...

legend {
    display: block;
    width: auto;
    padding: 0 5px;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    border: auto;
    border-bottom: none;
}

fieldset {
    border: 2px groove threedface;
    padding: 5px;
}

Here's a fiddle:

http://jsfiddle.net/ApzWW/2/

---

Related Topics