<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container border bg-light pt-2"> <h5>Пользователи и Группы</h5> <div class="row pt-2"> <div class="col-6 border pt-2"> <div class="form-group"> <label>Поиск в домене</label> <div class="input-group"> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> <div class="input-group-append"> <select class="custom-select btn pl-0"> <option selected>Любой</option> <option value="1">Пользователь</option> <option value="2">Группа</option> </select> <button class="btn btn-outline-primary" type="button">Искать</button> </div> </div> </div> <div class="from-group mb-3"> <select class="custom-select" multiple size="10"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <button type="button" class="btn btn-primary my-2 float-right">></button> </div> </div> <div class="col-6 border pt-2"> <div class="form-group"> <label>Назначение прав</label> <div class="input-group"> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> <div class="input-group-append"> <select class="custom-select btn pl-0"> <option selected>Любой</option> <option value="0">Пользователь</option> <option value="1">Редактор</option> <option value="2">Администратор</option> </select> <button class="btn btn-outline-primary" type="button">Искать</button> </div> </div> </div> <div class="mb-3"> <ul class="list-grouip pl-0"> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">User-01-001</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1" selected>Редактор</option> <option value="2">Администратор</option> </select></div> </li> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">User-01-003</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1">Редактор</option> <option value="2" selected>Администратор</option> </select></div> </li> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">User-02-004</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1" selected>Редактор</option> <option value="2">Администратор</option> </select></div> </li> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">Group-06</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1" selected>Редактор</option> <option value="2">Администратор</option> </select></div> </li> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">User-01-101</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1">Редактор</option> <option value="2" selected>Администратор</option> </select></div> </li> <li class="list-group-item p-0"><div class="d-flex justify-content-between align-items-center"> <div class="col-8">Group-03</div> <select class="custom-select col-4"> <option value="0">Пользователь</option> <option value="1" selected>Редактор</option> <option value="2">Администратор</option> </select></div> </li> </ul> <button type="button" class="btn btn-primary my-2">--</button> </div> </div> </div> </div>