Issues wrapping border round a group of divs in bootstrap

Question

So I am having issues applying a border and a border background to a section of my page. I was wondering how I could do this, I've tried make two rows on the same line and apply a border to each but so far nothing I've tried has worked.

To simplify it: My page looks like this https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52

When I need it to look like this https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a

HTML

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div id="map-holder-image">
                <img src="img/map-holder.png" class="img-responsive"/>
            </div>
        </div>
        <form class="form" id="border">
        <div class="form-group col-xs-4 col-md-4">
            <label for="first-name" class="control-label">First Name</label>
            <input type="text" class="form-control" id="first-name">
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="email-address" class="control-label">Email</label>
            <input type="email" class="form-control" id="email-address">
        </div>
        <br>
        <div class="form-group col-xs-4 col-md-4">
            <label for="last-name" class="control-label">Last Name</label>
            <input type="text" class="form-control" id="last-name">
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="confirm-email-address" class="control-label">Confirm Email</label>
            <input type="email" class="form-control" id="confirm-email-address">
        </div>
        <div class="form-group col-xs-4 col-md-4" id="date-picker">
            <label for="dates" class="control-label">Date of Birth</label>
        <select class="date-dropdown" id="day-dropdown-form">
        <script>
            var daylist = "";
            var i;
            for (i = 1; i <= 31; i++) {
                daylist += "<option>" + i + "</option>";
            }

            document.getElementById("day-dropdown-form").innerHTML = daylist;
        </script>
        </select>
        <select id="month-dropdown-form">
        <script>
            var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var monthlist = "";
            var i;
            for (i = 0; i < months.length; i++) {
                monthlist += "<option>" + months[i] + "</option>";
            }

            document.getElementById("month-dropdown-form").innerHTML = monthlist;
        </script>
        </select>
        <select class="date-dropdown" id="year-dropdown-form">
        <script>
            var yearlist = "";
            var i;
            for (i = 2016; i >= 1900; i--) {
                yearlist += "<option>" + i + "</option>";
            }

            document.getElementById("year-dropdown-form").innerHTML = yearlist;
        </script>
        </select>
        </div>
        <div class="col-md-4" id="submit-button-col">
            <button class="btn btn-info btn-lg" id="submit-button" type="button">
                <h3>Submit</h3>
            </button>
        </div>
        </form>
    </div>

CSS

/*-- Bootstrap overrides instead of editing source LESS files --*/

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Open Sans', sans-serif;
    }

    p, div {
      font-family: 'Open Sans', sans-serif;
    }

    /*-- Custom Styling --*/

    #logo {
        padding: 10px;
    }

    #searchbox {
        padding: 10px;
    }

    #search-input {
      border: solid 1px gray;
      border-radius: 8px;
      background-color: #fff;
    }

    #search-input input {
      border: 0;
      box-shadow: none;
      background: none;
    }

    #search-button {
        padding: 8px;
    }

    #search-button button {
      background: none;
      border: none;
    }

    #login-name {
        padding: 10px;
    }

    #login-name p {
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
        float: right;
    }

    #settings-icon {
        padding-top: 20px;
    }

    .navbar .navbar-inner {
      padding: 0;
    }

    .navbar .nav {
      margin: 0;
      display: table;
      width: 100%;
    }

    .navbar .nav li {
      display: table-cell;
      width: 11.1%;
      float: none;
      text-align: center;
      left: 4px;
      font-weight: bold;
    }

    .navbar .nav li a {
      border-right: 1px solid black;
    }

    #active-link {
        text-decoration: underline;
    }

    .navbar .nav li:first-child a {
      border-left: 0;
      border-radius: 3px 0 0 3px;
    }

    .navbar .nav li:last-child a {
      border-right: 0;
      border-radius: 0 3px 3px 0;
    }

    #detail-request {
        text-align: center;
        padding: 15px;
    }

    #banner-top-col {
      width: 100%;
      padding: 0;
    }

    #banner-bottom-col {
      width: 100%;
      padding: 0;
    }
    #banner-top {
      margin: auto;
      margin-bottom: 10px;
      width: 100%;
      height: 250px;
    }

    .banner-information {
      position: absolute;
      border: 5px solid #ff6600;
      background-color: #ebebeb;
      width: 400px;
      height: 180px;
      border-radius: 7px;
      top: 12%;
      text-align: center;
      padding: 5px;
      left: 5%;
    }

    .banner-information h4 {
      font-size: 20px;
      text-align: left;
      padding-left: 5px;
      padding-top: 15px;
    }

    .banner-information h1 {
      font-size: 60px;
      padding-left: 5px;
      text-align: left;
      font-weight: bold;
      margin: 0;
    }

    #map-holder-image {
      border: 2px solid #ff6600;
      border-radius: 7px;
      width: auto;
      padding: 1px;
    }
    #email-address, #confirm-email-address, #first-name, #last-name {
      width: 85%;
    }


    #contact-form-box {
      border: 1px solid #ff6600;
      width: auto;
      background-color: #ebebeb;
      border-radius: 7px;
    }

    .support-box {
      border: 2px solid #ff6600;
      background-color: #ebebeb;
      border-radius: 7px;
      text-align: center;
      width: 359px;
      margin-right: 18.5px;
      margin-top: 10px;
      display: inline-block;
      right: 10px;
      height: 230px;
    }

    .support-box h3 {
      font-size: 25px;
      text-align: center;
      padding: 10px;
    }

     #support {
      margin: 0 auto;
      border: 0px solid #ffad41;
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      border-radius: 16px;
      font-size: 38px;
      font-family: arial;
      text-decoration: none;
      display: inline-block;
      text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
      font-weight: bold;
      color: #FFFFFF;
      background-color: #ffc579;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
      background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
      background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
      background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
      background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
      background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
      filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
      text-align: center;
      height: 80px;
      width: 180px;
    }

    #support:hover {
      border: 0px solid #ff9913;
      background-color: #ffaf46;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
      background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
      background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
      background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
      background-image: -o-linear-gradient(top, #ffaf46, #e78404);
      background-image: linear-gradient(to bottom, #ffaf46, #e78404);
      filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404);
    }

    #support-image {
      display: inline-block;
    }

    #support h3 {
      display: inline-block;
      padding: 0;
      padding-right: 15px;
      font-weight: 800;
      margin: 0 auto;
    }

    .date-dropdown {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("../img/input-triangle.png") no-repeat white;
      background-position: 50px center;
      width: 80px;
      height: 30px;
      border: 1px solid #ddd;
      background-size: 28px;
      padding-left: 10px;
      border-radius: 4px;
      margin-top: 10px;
      margin-right: 22px;
    }

    #date-picker {
      height: 100px;
    }

    #month-dropdown-form {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("../img/input-triangle.png") no-repeat white;
      background-position: 65px center;
      width: 95px;
      height: 30px;
      border: 1px solid #ddd;
      background-size: 28px;
      padding-left: 10px;
      border-radius: 4px;
      margin-top: 10px;
      margin-right: 22px;
    }

    #submit-button-col {
      text-align: center;
      margin: 0 auto;
      height: 100px;
    }

    #submit-button {
      margin: 0 auto;
      margin-top: 25px;
      border: 0px solid #46ec02;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      font-family: arial;
      text-decoration: none;
      display: inline-block;
      text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
      font-weight: bold;
      color: #FFFFFF;
      background-color: #46ec02;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307));
      background-image: -webkit-linear-gradient(top, #46ec02, #28c307);
      background-image: -moz-linear-gradient(top, #46ec02, #28c307);
      background-image: -ms-linear-gradient(top, #46ec02, #28c307);
      background-image: -o-linear-gradient(top, #46ec02, #28c307);
      background-image: linear-gradient(to bottom, #46ec02, #28c307);
      filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307);
      text-align: center;
      height: 65px;
      width: 200px;
      margin-right: 45px;
    }

    #submit-button h3 {
      display: inline-block;
      padding: 0;
      text-align: center;
      margin: 0 auto;
      font-weight: 800;
    }

    #banner-bottom {
      margin: auto;
      width: 100%;
      height: 250px;
      padding-top: 15px;
    }

    #footer {
      background-color: #363636;
      height: 250px;
    }

    #footer p {
      color: white;
      text-align: center;
      vertical-align: middle;
      line-height: 130px;
    }

    #footer-line {
      border: 1px solid white;
      width: 95%;
    }

Thanks a lot :)

Answer 1

Make sure to add #border to your CSS with the required border styles such as: border: 1px solid #000;

If you wrap your divs within a parent div then you can simply add a border to the parent div and it will appear around all divs within it.

In this case to add a border round all the divs within the form

TRY

 .form { border:2px solid #000; background: #eee; } 

 <form class="form"> <div> <input type="text" / > </div> <div> <input type="text" / > </div> 

Answer 2

Add only #map-holder-image, #border as to add style id of #border see demo here...

 /*-- Bootstrap overrides instead of editing source LESS files --*/ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; } p, div { font-family: 'Open Sans', sans-serif; } /*-- Custom Styling --*/ #logo { padding: 10px; } #searchbox { padding: 10px; } #search-input { border: solid 1px gray; border-radius: 8px; background-color: #fff; } #search-input input { border: 0; box-shadow: none; background: none; } #search-button { padding: 8px; } #search-button button { background: none; border: none; } #login-name { padding: 10px; } #login-name p { text-align: center; vertical-align: middle; line-height: 50px; float: right; } #settings-icon { padding-top: 20px; } .navbar .navbar-inner { padding: 0; } .navbar .nav { margin: 0; display: table; width: 100%; } .navbar .nav li { display: table-cell; width: 11.1%; float: none; text-align: center; left: 4px; font-weight: bold; } .navbar .nav li a { border-right: 1px solid black; } #active-link { text-decoration: underline; } .navbar .nav li:first-child a { border-left: 0; border-radius: 3px 0 0 3px; } .navbar .nav li:last-child a { border-right: 0; border-radius: 0 3px 3px 0; } #detail-request { text-align: center; padding: 15px; } #banner-top-col { width: 100%; padding: 0; } #banner-bottom-col { width: 100%; padding: 0; } #banner-top { margin: auto; margin-bottom: 10px; width: 100%; height: 250px; } .banner-information { position: absolute; border: 5px solid #ff6600; background-color: #ebebeb; width: 400px; height: 180px; border-radius: 7px; top: 12%; text-align: center; padding: 5px; left: 5%; } .banner-information h4 { font-size: 20px; text-align: left; padding-left: 5px; padding-top: 15px; } .banner-information h1 { font-size: 60px; padding-left: 5px; text-align: left; font-weight: bold; margin: 0; } #map-holder-image, #border { border: 2px solid #ff6600; border-radius: 7px; width: auto; padding: 1px; } #email-address, #confirm-email-address, #first-name, #last-name { width: 85%; } #contact-form-box { border: 1px solid #ff6600; width: auto; background-color: #ebebeb; border-radius: 7px; } .support-box { border: 2px solid #ff6600; background-color: #ebebeb; border-radius: 7px; text-align: center; width: 359px; margin-right: 18.5px; margin-top: 10px; display: inline-block; right: 10px; height: 230px; } .support-box h3 { font-size: 25px; text-align: center; padding: 10px; } #support { margin: 0 auto; border: 0px solid #ffad41; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; font-size: 38px; font-family: arial; text-decoration: none; display: inline-block; text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3); font-weight: bold; color: #FFFFFF; background-color: #ffc579; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23)); background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23); background-image: -moz-linear-gradient(top, #ffc579, #fb9d23); background-image: -ms-linear-gradient(top, #ffc579, #fb9d23); background-image: -o-linear-gradient(top, #ffc579, #fb9d23); background-image: linear-gradient(to bottom, #ffc579, #fb9d23); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23); text-align: center; height: 80px; width: 180px; } #support:hover { border: 0px solid #ff9913; background-color: #ffaf46; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404)); background-image: -webkit-linear-gradient(top, #ffaf46, #e78404); background-image: -moz-linear-gradient(top, #ffaf46, #e78404); background-image: -ms-linear-gradient(top, #ffaf46, #e78404); background-image: -o-linear-gradient(top, #ffaf46, #e78404); background-image: linear-gradient(to bottom, #ffaf46, #e78404); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404); } #support-image { display: inline-block; } #support h3 { display: inline-block; padding: 0; padding-right: 15px; font-weight: 800; margin: 0 auto; } .date-dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("../img/input-triangle.png") no-repeat white; background-position: 50px center; width: 80px; height: 30px; border: 1px solid #ddd; background-size: 28px; padding-left: 10px; border-radius: 4px; margin-top: 10px; margin-right: 22px; } #date-picker { height: 100px; } #month-dropdown-form { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("../img/input-triangle.png") no-repeat white; background-position: 65px center; width: 95px; height: 30px; border: 1px solid #ddd; background-size: 28px; padding-left: 10px; border-radius: 4px; margin-top: 10px; margin-right: 22px; } #submit-button-col { text-align: center; margin: 0 auto; height: 100px; } #submit-button { margin: 0 auto; margin-top: 25px; border: 0px solid #46ec02; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-family: arial; text-decoration: none; display: inline-block; text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3); font-weight: bold; color: #FFFFFF; background-color: #46ec02; background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307)); background-image: -webkit-linear-gradient(top, #46ec02, #28c307); background-image: -moz-linear-gradient(top, #46ec02, #28c307); background-image: -ms-linear-gradient(top, #46ec02, #28c307); background-image: -o-linear-gradient(top, #46ec02, #28c307); background-image: linear-gradient(to bottom, #46ec02, #28c307); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307); text-align: center; height: 65px; width: 200px; margin-right: 45px; } #submit-button h3 { display: inline-block; padding: 0; text-align: center; margin: 0 auto; font-weight: 800; } #banner-bottom { margin: auto; width: 100%; height: 250px; padding-top: 15px; } #footer { background-color: #363636; height: 250px; } #footer p { color: white; text-align: center; vertical-align: middle; line-height: 130px; } #footer-line { border: 1px solid white; width: 95%; } 

 <div class="container"> <div class="row"> <div class="col-md-4"> <div id="map-holder-image"> <img src="img/map-holder.png" class="img-responsive"/> </div> </div> <form class="form" id="border"> <div class="form-group col-xs-4 col-md-4"> <label for="first-name" class="control-label">First Name</label> <input type="text" class="form-control" id="first-name"> </div> <div class="form-group col-xs-4 col-md-4"> <label for="email-address" class="control-label">Email</label> <input type="email" class="form-control" id="email-address"> </div> <br> <div class="form-group col-xs-4 col-md-4"> <label for="last-name" class="control-label">Last Name</label> <input type="text" class="form-control" id="last-name"> </div> <div class="form-group col-xs-4 col-md-4"> <label for="confirm-email-address" class="control-label">Confirm Email</label> <input type="email" class="form-control" id="confirm-email-address"> </div> <div class="form-group col-xs-4 col-md-4" id="date-picker"> <label for="dates" class="control-label">Date of Birth</label> <select class="date-dropdown" id="day-dropdown-form"> <script> var daylist = ""; var i; for (i = 1; i <= 31; i++) { daylist += "<option>" + i + "</option>"; } document.getElementById("day-dropdown-form").innerHTML = daylist; </script> </select> <select id="month-dropdown-form"> <script> var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var monthlist = ""; var i; for (i = 0; i < months.length; i++) { monthlist += "<option>" + months[i] + "</option>"; } document.getElementById("month-dropdown-form").innerHTML = monthlist; </script> </select> <select class="date-dropdown" id="year-dropdown-form"> <script> var yearlist = ""; var i; for (i = 2016; i >= 1900; i--) { yearlist += "<option>" + i + "</option>"; } document.getElementById("year-dropdown-form").innerHTML = yearlist; </script> </select> </div> <div class="col-md-4" id="submit-button-col"> <button class="btn btn-info btn-lg" id="submit-button" type="button"> <h3>Submit</h3> </button> </div> </form> </div>