How to keep border across divs in bootstrap - html

Question

I have a box on the left and a big div i want to wrap them with a border with a light color. I want the borter to be of square shape. How can i do this. I have also added the style of the progress bar incase if it helps. I want a border box with shade around the progress bar circle. I am using bootstrap version 4
border pic
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>

Answer 1

I just add few CSS, I hope it'll help you out. Thanks
.light-border {
border: 1px solid #ccc;
}
and add light-border in <div class="row light-border">.
.light-border {
border: 1px solid #ccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row light-border">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>