ブラウザのサイズが変更されたときに、右のブートストラップカラムが左カラムの下に表示される

Question

私は、左カラムにアコーディオンナビゲーションを組み込み、右カラムにコンテンツを組み込んだ2カラムテンプレートを用意しました。

ただし、ブラウザのサイズを変更すると、右側の列がナビゲーション列の下の左側に表示されます。

私は左の列に固定幅があり、右の列にも固定幅があるようにしたいと思いますが、それらを応答性のままにしておきたいと思いますが、/

固定高さの使用を避け、可能であればメディアの問い合わせでこれを修正してみます。今あなたがその使用に伴いそのほとんどがCOL-MD-*クラスいくつかのCOL-SM- *またはCOL-XS- *クラスを使用していると、これはから列を防ぐことができます

body { 
 
    background-color: #ccc; 
 
} 
 
/* General styles */ 
 

 
.container { 
 
    background-color: #999999; 
 
    font-family: arial, verdana, sans-serif; 
 
    min-width: 1530px; 
 
    margin: 0 auto; 
 
} 
 
/* Large desktop */ 
 

 
@media (max-width: 1590px) { 
 
    .container { 
 
    width: auto; 
 
    } 
 
} 
 
@media (max-width: 980px) { 
 
    .accordion.sidebar { 
 
    width: 100%; 
 
    } 
 
} 
 
@media (min-width: 980px) { 
 
    .accordion.sidebar { 
 
    width: 200px; 
 
    } 
 
} 
 
.col-md-10 { 
 
    border-left: 1px solid #4d4d4d; 
 
} 
 
.container .row.header { 
 
    color: #fff; 
 
    border-bottom: 6px solid #fff 
 
} 
 
.container .row.header h1 { 
 
    padding: 30px 0; 
 
    font-size: 3.5em; 
 
    font-weight: 300; 
 
} 
 
h2 { 
 
    color: #fff; 
 
    font-size: 32px; 
 
} 
 
h3 { 
 
    color: #ccc; 
 
    font-size: 30px; 
 
    padding-bottom: 10px; 
 
} 
 
h3.inner { 
 
    padding-left: 15px; 
 
} 
 
h4 { 
 
    color: #ccc; 
 
    font-size: 22px; 
 
} 
 
.headers { 
 
    border-top: 1px solid #ccc; 
 
    margin-top: 50px; 
 
    margin-bottom: 30px; 
 
} 
 
.headers h1 { 
 
    padding: 20px 0 0 0; 
 
} 
 
.headers p { 
 
    font-size: 1.6em; 
 
    color: #fff; 
 
    padding: 0 0 10px 0; 
 
    margin: 0; 
 
} 
 
/* ****** NAVIGATION SIDEBAR ******** 
 
********************************** 
 
*/ 
 

 
.accordion.sidebar { 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 
.panel { 
 
    border-radius: 0 !important; 
 
    border: 0; 
 
    font-family: 'Lato', Arial, sans-serif; 
 
    font-weight: 400 
 
} 
 
.panel-group { 
 
    border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff} 
 
    .panel-heading h4.panel-title { 
 
    border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;} 
 
    .panel-heading h4.panel-title a: link { 
 
     margin-left: 10px; 
 
     text-decoration: none; 
 
     font-weight: bold; 
 
     font-size: 20px 
 
    } 
 
    .panel-heading h4.panel-title a:active { 
 
     color: #fff 
 
    } 
 
    .panel-heading h4.panel-title a:hover { 
 
     color: #FF5500 
 
    } 
 
    .panel-group .panel+.panel { 
 
     margin-top: 0px !important; 
 
     border-top: 1px solid #ccc 
 
    } 
 
    .panel.panel-default.custom .panel-heading { 
 
     background: #fff; 
 
     color: #000; 
 
     border-color: #fff 
 
    } 
 
    .panel-body { 
 
     /* padding-top: 2px !important; padding-bottom: 0px !important; */ 
 
     padding: 0px !important; 
 
     border: 0 
 
    } 
 
    .panel-body ul { 
 
     margin: 0; 
 
     padding: 0 
 
    } 
 
    .panel-body ul li { 
 
     padding: 10px 0 !important; 
 
     border-bottom: 1px solid #ccc; 
 
     font-size: 1.4em 
 
    } 
 
    .panel-body ul li:last-child { 
 
     border-bottom: 0 
 
    } 
 
    .panel-body ul a { 
 
     color: #1f1f1f 
 
    } 
 
    .panel-body ul li a:link { 
 
     margin-left: 40px !important; 
 
     color: #1f1f1f 
 
    } 
 
    .panel-body ul li a:active { 
 
     color: #fff 
 
    } 
 
    .panel-body ul li a:hover { 
 
     text-decoration: none; 
 
     color: #FF5500 
 
    } 
 
    #collapseOne.panel-collapse, 
 
    #collapseTwo.panel-collapse, 
 
    #collapseThree.panel-collapse { 
 
     border: 0 !important; 
 
     padding: 0 
 
    } 
 
    .panel-heading.collapsed { 
 
     background-color: #222222 
 
    } 
 
    /* ******** FORM STYLING *********** 
 
************************************ 
 
*/ 
 
    .form-horizontal .form-group .custom-label { 
 
     text-align: left; 
 
     margin-top: -10px; 
 
     font-size: 22px; 
 
     font-weight: normal; 
 
     color: #fff; 
 
     width: 200px; 
 
    } 
 
    .form-horizontal .form-group .form-control { 
 
     background-color: #4d4d4d; 
 
     border-color: #4d4d4d; 
 
     color: #fff; 
 
     border-radius: 3px; 
 
    } 
 
    .form-horizontal .form-group .input-text { 
 
     font-size: 1.3em; 
 
     color: #fff; 
 
    } 
 
    .form-horizontal .form-group .form-control:hover { 
 
     background-color: #34383C; 
 
     border: 1px solid #4d4d4d; 
 
    } 
 
    .form-horizontal .form-group .form-control:focus { 
 
     border: 1px solid #FF5500; 
 
    } 
 
    .form-group.social .col-md-2 { 
 
     padding: 0; 
 
     margin: 0; 
 
     width: 200px; 
 
    } 
 
    .form-group.social .col-md-2 .fa-instagram, 
 
    .form-group.social .col-md-2 .fa-twitter { 
 
     font-size: 1.1em; 
 
     padding: 0 5px 0 20px; 
 
    } 
 
    .changePswrd { 
 
     padding: 3px 0 0 12px; 
 
    } 
 
    .changePswrd a:link { 
 
     font-family: 'Lato', verdana, sans-serif; 
 
     font-size: 1.3em; 
 
     color: #fff; 
 
     display: inline-block; 
 
    } 
 
    .changePswrd a:hover { 
 
     text-decoration: none; 
 
     color: #FF5500; 
 
    } 
 
    .form-group .placeholder-img.col-md-2 { 
 
     height: 320px; 
 
     width: 230px; 
 
     background-color: #4d4d4d; 
 
     margin: 0 20px; 
 
    } 
 
    .form-group .placeholder-img-thumb { 
 
     height: 320px; 
 
    } 
 
    .form-group .placeholder-img-thumb .thumb-img { 
 
     text-align: center; 
 
     width: 130px; 
 
    } 
 
    .form-group .placeholder-img-thumb .circle { 
 
     width: 130px; 
 
     height: 130px; 
 
     background: #4d4d4d; 
 
     -moz-border-radius: 100px; 
 
     -webkit-border-radius: 100px; 
 
     border-radius: 100px; 
 
    } 
 
    .form-group .placeholder-img-thumb .caption { 
 
     width: 100%; 
 
     color: #fff; 
 
    } 
 
    .form-group .profile-photo-help.col-md-4 { 
 
     width: 200px; 
 
    } 
 
    .form-group .profile-photo-help { 
 
     width: 280px; 
 
     color: #fff; 
 
    } 
 
    .form-group .profile-photo-help p {} .form-group .profile-photo-help a:link { 
 
     color: #FF5500; 
 
     text-decoration: none; 
 
    } 
 
    .form-group .profile-photo-help a:hover { 
 
     color: #fff; 
 
    } 
 
    .form-group .create-card-btn .glyphicon-plus { 
 
     font-size: 0.9em; 
 
     padding: 0 10px 0 0; 
 
    } 
 
    .form-group .input-group.date span.input-group-addon { 
 
     background-color: #4d4d4d; 
 
     color: #fff; 
 
     border: none; 
 
     border-radius: 3px; 
 
     border-color: none; 
 
    } 
 
    .form-group .input-group.date .form-control.date { 
 
     font-size: 1.2em; 
 
    } 
 
    .form-group .strength-delete-btn .glyphicon-minus { 
 
     font-size: 0.9em; 
 
     padding: 0 5px 0 0; 
 
    } 
 
    /* SUBMISSION BUTTONS */ 
 
    .submission { 
 
     background-color: #333333; 
 
     border-top: 1px solid #4d4d4d; 
 
     margin-top: 80px; 
 
     padding-top: 40px; 
 
     padding-bottom: 40px; 
 
    } 
 
    .submission button { 
 
     border-radius: 3px; 
 
     font-size: 1.5em; 
 
     border: none; 
 
    } 
 
    .submission .glyphicon-remove-circle, 
 
    .submission .glyphicon-ok-circle { 
 
     font-size: 1.6em; 
 
     font-weight: 400; 
 
     vertical-align: middle; 
 
     padding: 0 5px; 
 
     color: #fff; 
 
    } 
 
    .submission .btn-cancel { 
 
     margin-right: 20px; 
 
     background-color: #4d4d4d; 
 
    } 
 
    .submission .btn-save { 
 
     background-color: #aaa; 
 
    } 
 
    .submission .action-btns .btn-primary:hover, 
 
    .submission .action-btns .btn-primary.outline:focus, 
 
    .btn-primary:active { 
 
     color: #33a6cc; 
 
     border-color: #fff; 
 
    } 
 
    .submission .action-btns .btn-primary:active, 
 
    .submission .action-btns .btn-primary.active { 
 
     border-color: #007299; 
 
     color: #007299; 
 
     box-shadow: none; 
 
    } 
 
    .btn.outline { 
 
     background: none; 
 
     padding: 12px 22px; 
 
    } 
 
    .btn.outline.upload { 
 
     position: absolute; 
 
     bottom: 0; 
 
     padding: 5px 40px 5px 40px; 
 
    } 
 
    .btn.outline.football { 
 
     background: none; 
 
     padding: 5px 22px; 
 
     margin-right: 20px; 
 
    } 
 
    .btn.outline.create-card-btn { 
 
     background: none; 
 
     padding: 5px 22px; 
 
    } 
 
    .btn.outline.sizing-guide-btn { 
 
     background: none; 
 
     padding: 5px 22px; 
 
    } 
 
    .btn.outline.strength-delete-btn { 
 
     background: none; 
 
     padding: 5px 22px; 
 
     width: 100% 
 
    } 
 
    .btn.outline.add-result-btn { 
 
     background: none; 
 
     padding: 5px 22px; 
 
     margin-top: 15px; 
 
    } 
 
    .btn-primary.outline { 
 
     border: 1px solid #fff; 
 
     color: #fff; 
 
     font-family: 'Lato', verdana, sans-serif; 
 
     font-size: 1.1em; 
 
    } 
 
    .btn-primary.outline.strength-delete-btn { 
 
     border: 1px solid #4d4d4d; 
 
     color: #4d4d4d; 
 
    } 
 
    .btn-primary.outline:hover, 
 
    .btn-primary.outline:focus, 
 
    .btn-primary.outline:active, 
 
    .btn-primary.outline.active, 
 
    .open > .dropdown-toggle.btn-primary { 
 
     color: #FF5500; 
 
     border-color: #F47929; 
 
    } 
 
    .btn-primary.outline:active, 
 
    .btn-primary.outline.active { 
 
     border-color: #007299; 
 
     color: #007299; 
 
     box-shadow: none; 
 
    } 
 
    /* CUSTOM SUBMISSION BTN VALUES */ 
 
    .btn-primary { 
 
     padding: 14px 24px; 
 
     border: 0 none; 
 
    } 
 
    .btn:focus, 
 
    .btn:active:focus, 
 
    .btn.active:focus { 
 
     outline: 0 none; 
 
    }

<head> 
 
    <title></title> 
 

 
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
 
    <meta name="description" content="" /> 
 
    <meta name="keywords" content="" /> 
 
    <meta name="robots" content="index,follow" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="custom-styles.css" /> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
    <!-- \t ********************************** 
 
\t \t \t \t following functionality for the accordion referencing to load individual 
 
\t \t \t \t body of parent links 
 
\t \t \t ************************************ 
 
\t \t --> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row header"> 
 
     <div class="col-md-12"> 
 
     <h1>Heading 1</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-2 accordion sidebar"> 
 
     <div class="panel-group" id="accordion"> 
 
      <div class="panel panel-default custom"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne"> 
 
\t \t \t \t \t \t \t Link 1 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in"> 
 
       <div class="panel-body"> 
 
       <ul class="list-unstyled"> 
 
        <li><a href=""> sub-link</a> 
 
        <li><a href=""> sub-link</a> 
 
         <li><a href=""> sub-link</a> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default custom"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo"> 
 
\t \t \t \t \t \t \t Title 2 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
       <ul class="list-unstyled"> 
 
        <li><a href=""> sub-link</a> 
 
        <li><a href=""> sub-link</a> 
 
         <li><a href=""> sub-link</a> 
 
         <li><a href=""> sub-link</a> 
 
          <li><a href=""> sub-link</a> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default custom"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree"> 
 
\t \t \t \t \t \t \t Title 3 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
       <ul class="list-unstyled"> 
 
        <li><a href=""> sub-link</a> 
 
        <li><a href=""> sub-link</a> 
 
         <li><a href=""> sub-link</a> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="panel panel-default custom"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive"> 
 
\t \t \t \t \t \t \t Title 4 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      </div> 
 

 
      <div class="panel panel-default custom"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix"> 
 
\t \t \t \t \t \t \t Title 5 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- end of sidebar --> 
 
     </div> 
 
     <!-- end of row --> 
 

 
     <div class="container load"> 
 
     <div class="col-lg-10"> 
 

 
      <div class="wrapper"> 
 
      <div class="row"> 
 
       <div class="col-md-10"> 
 
       <h2>Page Title</h2> 
 
       <div class="form-horizontal" role="form" action="/details" method="post"> 
 
        <div class="form-group"> 
 
        <h3 class="inner">General</h3> 
 
        <label for="title" class="col-md-2 control-label custom-label">title</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="" placeholder="title" focus> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="title" class="col-md-2 control-label custom-label">title</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="title" placeholder="title"> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="title" class="col-md-2 control-label custom-label">title</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="title" placeholder="title"> 
 
        </div> 
 

 
        </div> 
 

 
        <div class="headers"> 
 
        <h3>Information</h3> 
 
        <p> 
 
         Info titletitletitletitletitletitletitletitletitle</br> 
 
         titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle 
 
        </p> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <h3 class="inner">Address</h3> 
 
        <label for="unit" class="col-md-2 control-label custom-label">Unit number</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="unitNumber" placeholder="1"> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="streetNo" class="col-md-2 control-label custom-label">Street number</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="streetNumber" placeholder="25"> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="streetName" class="col-md-2 control-label custom-label">Street name</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="streetName" placeholder=""> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="suburb" class="col-md-2 control-label custom-label">Suburb</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="suburb" placeholder=""> 
 
        </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
        <label for="zip" class="col-md-2 control-label custom-label">Postcode</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="zip" placeholder=""> 
 
        </div> 
 
        </div> 
 
        <div class="form-group"> 
 
        <label for="state" class="col-md-2 control-label custom-label">State</label> 
 
        <div class="col-md-6"> 
 
         <input type="text" class="form-control input-text" id="state" placeholder=""> 
 
        </div> 
 
        </div> 
 

 

 

 
        <div class="headers"> 
 
        <h3>Social Networks</h3> 
 
        </div> 
 

 
        <div class="form-group social"> 
 
        <div class="col-md-2"> 
 
         <label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label> 
 
        </div> 
 
        <div class="col-md-5"> 
 
         <input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle"> 
 
        </div> 
 

 

 

 
        </div> 
 

 
        <div class="form-group social"> 
 
        <div class="col-md-2"> 
 
         <label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label> 
 
        </div> 
 
        <div class="col-md-5"> 
 
         <input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle"> 
 
        </div> 
 

 

 
        </div> 
 

 
        <div class="row submission"> 
 
        <div class="form-group btn-block"> 
 
         <div class="pull-right"> 
 
         <button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button> 
 
         <button type="button" class="btn btn-default btn-lg btn-save">Save changes</button> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <!-- end of form --> 
 
       </div> 
 
      </div> 
 
      <!-- end of row --> 
 
      <!-- </div> end of container --> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- end of container -->

Answer 1

この効果は、列のドロップダウンが左の列の下にラップブレークポイント

body { 
    background-color: #ccc; 
} 

/* General styles */ 
.container { 
    background-color: #999999; 
    font-family: arial, verdana, sans-serif; 
    width: 1530px; 
    margin: 0 auto; 
} 

/* Large desktop */ 
@media (min-width: 981px) { 
    .container { 
    width: auto; 
    } 
} 
@media (min-width: 980px) { 
    .accordion.sidebar { 
    min-width: 200px; 
    max-width: 200px; 
    } 
} 
.col-xs-10 { 
    border-left: 1px solid #4d4d4d; 
} 
.container .row.header { 
    color: #fff; 
    border-bottom: 6px solid #fff 
} 
.container .row.header h1 { 
    padding: 30px 0; 
    font-size: 3.5em; 
    font-weight: 300; 
} 
h2 { 
    color: #fff; 
    font-size: 32px; 
} 
h3 { 
    color: #ccc; 
    font-size: 30px; 
    padding-bottom: 10px; 
} 
h3.inner { 
    padding-left: 15px; 
} 
h4 { 
    color: #ccc; 
    font-size: 22px; 
} 
.headers { 
    border-top: 1px solid #ccc; 
    margin-top: 50px; 
    margin-bottom: 30px; 
} 
.headers h1 { 
    padding: 20px 0 0 0; 
} 
.headers p { 
    font-size: 1.6em; 
    color: #fff; 
    padding: 0 0 10px 0; 
    margin: 0; 
} 

/* ****** NAVIGATION SIDEBAR ******** 
    ********************************** 
    */ 
.accordion.sidebar { 
    padding: 0; 
    background-color: #fff; 
} 
.panel { 
    border-radius: 0 !important; 
    border: 0; 
    font-family: 'Lato', Arial, sans-serif; 
    font-weight: 400 
} 
.panel-group { 
    border-radius: 0; 
    //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff 
} 
.panel-heading h4.panel-title { 
    border-radius: 0; 
    //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff; 
} 
.panel-heading h4.panel-title a:link { 
    margin-left: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 20px 
} 
.panel-heading h4.panel-title a:active { 
    color: #fff 
} 
.panel-heading h4.panel-title a:hover { 
    color: #FF5500 
} 
.panel-group .panel+.panel { 
    margin-top: 0px !important; 
    border-top: 1px solid #ccc 
    /* padding-top: 2px !important; 
    padding-bottom: 0px !important; */ 
    padding: 0px !importa 
} 
.panel.panel-default.custom .panel-heading { 
    background: #fff; 
    color: #000; 
    border-color: #fff 
} 
.panel-body { 
    /* padding-top: 2px !important; 
    padding-bottom: 0px !important; */ 
    padding: 0px !important; 
    border: 0 
} 
.panel-body ul { 
    margin: 0; 
    padding: 0 
} 
.panel-body ul li { 
    padding: 10px 0 !important; 
    border-bottom: 1px solid #ccc; 
    font-size: 1.4em 
} 
.panel-body ul li:last-child { 
    border-bottom: 0 
} 
.panel-body ul a { 
    color: #1f1f1f 
} 
.panel-body ul li a:link { 
    margin-left: 40px !important; 
    color: #1f1f1f 
} 
.panel-body ul li a:active { 
    color: #fff 
} 
.panel-body ul li a:hover { 
    text-decoration: none; 
    color: #FF5500 
} 
#collapseOne.panel-collapse, 
#collapseTwo.panel-collapse, 
#collapseThree.panel-collapse { 
    border: 0 !important; 
    padding: 0 
} 
.panel-heading.collapsed { 
    background-color: #222222 
} 

/* ******** FORM STYLING *********** 
    ************************************ 
    */ 
.form-horizontal .form-group .custom-label { 
    text-align: left; 
    margin-top: -10px; 
    font-size: 22px; 
    font-weight: normal; 
    color: #fff; 
    width: 200px; 
} 
.form-horizontal .form-group .form-control { 
    background-color: #4d4d4d; 
    border-color: #4d4d4d; 
    color: #fff; 
    border-radius: 3px; 
} 
.form-horizontal .form-group .input-text { 
    font-size: 1.3em; 
    color: #fff; 
} 
.form-horizontal .form-group .form-control:hover { 
    background-color: #34383C; 
    border: 1px solid #4d4d4d; 
} 
.form-horizontal .form-group .form-control:focus { 
    border: 1px solid #FF5500; 
} 

/* DROPDOWN MENU STYLING */ 

/* OPTIONAL FOR DROPDOWN CARET */ 
.dropdown-toggle .caret { 
    /* position: absolute; right: 12px; top: calc(50% - 2px); */ 
    background-image: url('arr.jpg'); 
    background-repeat: no-repeat; 
    position: absolute; 
    right: 12px; 
    top: calc(50% - 2px); 
} 
.form-group.social .col-xs-2 { 
    padding: 0; 
    margin: 0; 
    width: 200px; 
} 
.form-group.social .col-xs-2 .fa-instagram, 
.form-group.social .col-xs-2 .fa-twitter { 
    font-size: 1.1em; 
    padding: 0 5px 0 20px; 
} 
.changePswrd { 
    padding: 3px 0 0 12px; 
} 
.changePswrd a:link { 
    font-family: 'Lato', verdana, sans-serif; 
    font-size: 1.3em; 
    color: #fff; 
    display: inline-block; 
} 
.changePswrd a:hover { 
    text-decoration: none; 
    color: #FF5500; 
} 
.form-group .placeholder-img.col-xs-2 { 
    height: 320px; 
    width: 230px; 
    background-color: #4d4d4d; 
    margin: 0 20px; 
} 
.form-group .placeholder-img-thumb { 
    height: 320px; 
} 
.form-group .placeholder-img-thumb .thumb-img { 
    text-align: center; 
    width: 130px; 
} 
.form-group .placeholder-img-thumb .circle { 
    width: 130px; 
    height: 130px; 
    background: #4d4d4d; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    border-radius: 100px; 
} 
.form-group .placeholder-img-thumb .caption { 
    width: 100%; 
    color: #fff; 
} 
.form-group .profile-photo-help.col-xs-4 { 
    width: 200px; 
} 
.form-group .profile-photo-help { 
    width: 280px; 
    color: #fff; 
} 
.form-group .profile-photo-help p {} 
.form-group .profile-photo-help a:link { 
    color: #FF5500; 
    text-decoration: none; 
} 
.form-group .profile-photo-help a:hover { 
    color: #fff; 
} 
.form-group .create-card-btn .glyphicon-plus { 
    font-size: 0.9em; 
    padding: 0 10px 0 0; 
} 
.form-group .input-group.date span.input-group-addon { 
    background-color: #4d4d4d; 
    color: #fff; 
    border: none; 
    border-radius: 3px; 
    border-color: none; 
} 
.form-group .input-group.date .form-control.date { 
    font-size: 1.2em; 
} 
.form-group .strength-delete-btn .glyphicon-minus { 
    font-size: 0.9em; 
    padding: 0 5px 0 0; 
} 

/* SUBMISSION BUTTONS */ 
.submission { 
    background-color: #333333; 
    border-top: 1px solid #4d4d4d; 
    margin-top: 80px; 
    padding-top: 40px; 
    padding-bottom: 40px; 
} 
.submission button { 
    border-radius: 3px; 
    font-size: 1.5em; 
    border: none; 
} 
.submission .glyphicon-remove-circle, 
.submission .glyphicon-ok-circle { 
    font-size: 1.6em; 
    font-weight: 400; 
    vertical-align: middle; 
    padding: 0 5px; 
    color: #fff; 
} 
.submission .btn-cancel { 
    margin-right: 20px; 
    background-color: #4d4d4d; 
} 
.submission .btn-save { 
    background-color: #aaa; 
} 
.submission .action-btns .btn-primary:hover, 
.submission .action-btns .btn-primary.outline:focus, 
.btn-primary:active { 
    color: #33a6cc; 
    border-color: #fff; 
} 
.submission .action-btns .btn-primary:active, 
.submission .action-btns .btn-primary.active { 
    border-color: #007299; 
    color: #007299; 
    box-shadow: none; 
} 
.btn.outline { 
    background: none; 
    padding: 12px 22px; 
} 
.btn.outline.upload { 
    position: absolute; 
    bottom: 0; 
    padding: 5px 40px 5px 40px; 
} 
.btn.outline.football { 
    background: none; 
    padding: 5px 22px; 
    margin-right: 20px; 
} 
.btn.outline.create-card-btn { 
    background: none; 
    padding: 5px 22px; 
} 
.btn.outline.sizing-guide-btn { 
    background: none; 
    padding: 5px 22px; 
} 
.btn.outline.strength-delete-btn { 
    background: none; 
    padding: 5px 22px; 
    width: 100% 
} 
.btn.outline.add-result-btn { 
    background: none; 
    padding: 5px 22px; 
    margin-top: 15px; 
} 
.btn-primary.outline { 
    border: 1px solid #fff; 
    color: #fff; 
    font-family: 'Lato', verdana, sans-serif; 
    font-size: 1.1em; 
} 
.btn-primary.outline.strength-delete-btn { 
    border: 1px solid #4d4d4d; 
    color: #4d4d4d; 
} 
.btn-primary.outline:hover, 
.btn-primary.outline:focus, 
.btn-primary.outline:active, 
.btn-primary.outline.active, 
.open > .dropdown-toggle.btn-primary { 
    color: #FF5500; 
    border-color: #F47929; 
} 
.btn-primary.outline:active, 
.btn-primary.outline.active { 
    border-color: #007299; 
    color: #007299; 
    box-shadow: none; 
} 

/* CUSTOM SUBMISSION BTN VALUES */ 
.btn-primary { 
    padding: 14px 24px; 
    border: 0 none; 
} 
.btn:focus, 
.btn:active:focus, 
.btn.active:focus { 
    outline: 0 none; 
} 

<div class="container"> 
    <div class="row header"> 
    <div class="col-xs-12"> 
     <h1>Heading 1</h1> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-2 sidebar"> 
     <div class="panel-group" id="accordion"> 
     <div class="panel panel-default custom"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne">Link 1</a> 
        </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div class="panel panel-default custom"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">Title 2</a> 
        </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div class="panel panel-default custom"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">Title 3</a> 
        </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       <li><a href=""> sub-link</a> 
       </ul> 
      </div> 
      </div> 
     </div> 

     <div class="panel panel-default custom"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">Title 4</a> 
        </h4> 
      </div> 
     </div> 

     <div class="panel panel-default custom"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">Title 5</a> 
        </h4> 
      </div> 
     </div> 
     </div> 
     <!-- end of sidebar --> 
    </div> 
    <!-- end of row --> 

    <div class="container load"> 
     <div class="col-lg-10"> 

     <div class="wrapper"> 
      <div class="row"> 
      <div class="col-xs-10"> 
       <h2>Page Title</h2> 
       <div class="form-horizontal" role="form" action="/details" method="post"> 
       <div class="form-group"> 
        <h3 class="inner">General</h3> 
        <label for="title" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="" placeholder="title" focus> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="title" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="title" placeholder="title"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="title" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="title" placeholder="title"> 
        </div> 

       </div> 

       <div class="headers"> 
        <h3>Information</h3> 
        <p> 
        Info titletitletitletitletitletitletitletitletitle 
        <br> titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle 
        </p> 
       </div> 

       <div class="form-group"> 
        <h3 class="inner">Address</h3> 
        <label for="unit" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="title" placeholder="1"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="streetNo" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="title" placeholder="25"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="streetName" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="streetName" placeholder="title"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="suburb" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="suburb" placeholder="title"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="zip" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="zip" placeholder="title"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="state" class="col-xs-2 col-xs-2 control-label custom-label">title</label> 
        <div class="col-xs-6 col-xs-6"> 
        <input type="text" class="form-control input-text" id="state" placeholder="title"> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>