You should use input-group-addon and remove class form-control
Like
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-group">
<div class="input-group-addon">
<span class="input-group-text">Caption<br/></span>
</div>
<span>
<p class="form-control">Line 1</p>
<p class="form-control"><strong>Line 2</strong></p>
<p class="form-control"><strong>Line 3</strong></p>
</span>
</div>
</div>
</div>
Fiddle http://jsfiddle.net/bL6t8vrg/1/
You can use the following using a list-group with list-group-item and some customs rules to remove the inner border-radius (between prepend label and rows).
.input-group .list-group .list-group-item {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.input-group .input-group-prepend {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="input-group mb-2 col-12">
<div class="input-group-prepend">
<span class="input-group-text">Caption<br/></span>
</div>
<ul class="list-group">
<li class="list-group-item">Line 1</li>
<li class="list-group-item"><strong>Line 2</strong></li>
<li class="list-group-item"><strong>Line 3</strong></li>
</ul>
</div>
</div>
</div>
I’m new to Bootstrap and I’m trying to create an HTML form using Bootstrap input-groups with input-group-prepend captions. I need to be able to create a row with a single pre-pended caption with multiple styled lines within the associated form-control element, as shown below:
My HTML attempt looks like this so far:
<div class="container">
<div class="row">
<div class="input-group mb-2 col-12">
<div class="input-group-prepend">
<span class="input-group-text">Caption<br/></span>
</div>
<span class="form-control">
<p>Line 1</p>
<p><strong>Line 2</strong></p>
<p><strong>Line 3</strong></p>
</span>
</div>
</div>
</div>
with the following result:
How can I get multiple lines in the right-hand section within the bordered area? Any suggestions greatly appreciated.
Thanks for the quick reply Kenny. Your answer solves the multi-line issue but the borders are lost on the right-hand side. Any idea how I can retain them?
