"Fieldset and Legends area with border"
Bootstrap 4.1.1 Snippet by sawnerkundan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-12"> <form class="form-horizontal form-label-left"> <fieldset class="custom-border"> <legend class="custom-border">Legend Label</legend> <div class="form-group"> <div class="col-md-6"> <label>Input Field</label> </div> <div class="col-md-6"> <input type="text" class="form-control"> </div> </div> </fieldset> </form> </div> </div>
fieldset.custom-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.custom-border { width: auto; padding: 0 10px; border-bottom: none; }

Related: See More


Questions / Comments: