Как сохранить границу между div в начальной загрузке

Question

У меня есть поле слева и большой блок, я хочу обернуть их рамкой светлого цвета. Я хочу, чтобы бортер был квадратной формы. Как я могу это сделать. Я также добавил стиль индикатора выполнения, если это поможет. Я хочу рамку с тенью вокруг круга индикатора выполнения. Я использую загрузочную версию 4

Граница фото

<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">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <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> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </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

Я просто добавляю несколько CSS , надеюсь, это вам поможет.Спасибо

.light-border {
   border: 1px solid #ccc;
}

и добавьте light-border в <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">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <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> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </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>