html - custom layout with bootstrap, form lacking responsiveness -
i have bootstrap layout consisting of left column sidebar , right column main content area.
my sidebar has min-width: 260px; max-width: 260px; , main content has width:calc(100% - 260px);
now main content form, can see when decrease browser width (view in full screen , decrease), elements decrease in-sync browser , forces labels drop down , makes form-controls overlap labels , each of buttons text overflows outside boundary, , looks ugly.
is there simple method can do, in keeping sidebar width, make form respond nicer when browser decreased until hits 992px breakpoint (goes mobile view)?
i have tried various ways myself using media queries, finding challenging regarding layout , including proper breakpoints.
html * { box-sizing: border-box; } html, body { font-family: 'lato-black', verdana, sans-serif; background-color: #fff; color: #fff; font-size: 14px; height: 100%; } /* ------ ------ general styles ---------------------------------------------------------- ------ */ /* .container-fluid.outer {padding-top: 90px; } */ .container-fluid { min-height: 100%; /* width: 1530px; margin: 0 auto; */ } .full { background-color: #000; } /* pageframe div */ #main .content-load { background-color: #000; } /* large desktop */ @media (max-width: 1590px) { .banner-wrap { background-size: cover !important; max-width: 100% !important; } } @media (max-width: 981px) {}@media (min-width: 992px) { #sidebar { width: inherit; min-width: 260px; max-width: 260px; background-color: #000; float: left; height: 100%; position: relative; overflow: auto; } #main { width: calc(100% - 260px); } } /* ------ ------ profile edit/backend pages ----------------------------------------------------------- ------ */ em.orange { font-style: normal; color: #ff5500; } .primary-header { color: #fff; border-bottom: 6px solid #fff; background-color: #000; } .primary-header h1 { padding: 30px 0; font-size: 48px; } .main-content { padding-left: 15px; padding-right: 15px; } .main-content h2 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 2px; } .main-content h3 { color: #ff5500; font-size: 33px; padding-bottom: 10px; } .main-content h3.white { color: #fff; font-size: 24px; padding-bottom: 10px; margin-top: 0; } .main-content h4 { color: #ff5500; font-size: 30px; font-weight: bold; } .main-content h4.white { color: #fff; font-size: 30px; } .main-content .form-horizontal .form-group h1.inner { padding: 20px 0 0 0; } .main-content .form-horizontal .form-group h3.inner { padding: 0 0 0 15px; font-size: 30px; } .main-content .form-horizontal .form-group h4.inner { font-size: 1.9em; padding-top: 10px; padding-left: 15px; padding-bottom: 10px; } .main-content .form-horizontal h4.inner-white { color: #fff; padding-top: 10px; padding-bottom: 5px; } .main-content hr { display: block; height: 1px; border: 0; border-top: 1px solid #999999; margin: 30px 0 20px 0; padding: 0; } .main-content hr.soft { display: block; height: 1px; border: 0; border-top: 1px solid #444444; margin: 20px 0 20px 0; padding: 0; } .main-content hr.divider { display: block; height: 1px; border: 0; border-top: 1px solid #4d4d4d; margin: 0.5em 0 0.5em 0; padding: 0; } .tab-content hr.orange { border-color: #ff5500; margin-top: 50px; padding-bottom: 10px; } .news { padding-left: 0; } .glyphicon-plus { font-size: 20px; padding: 0 5px 0 0; } .glyphicon-minus { font-size: 20px; padding: 0 5px 0 0; } .glyphicon-pencil { padding: 0 8px 0 0; } /* --------- --------- secondary navigation sidebar -------------------------------------------- --------- */ #sidebar { padding-left: 0; padding-right: 0; margin: 0; background-color: #fff; } #accordion { border: 0; background-color: #000; } .panel { border-radius: 0 !important; border: 0; box-shadow: none; } .panel-group { border-radius: 0; /* box-shadow: 1px 1px 3px #074f68; */ border: 0; background-color: #fff; margin-bottom: 0; } .panel-group .panel+.panel { margin-top: 0px !important; border-top: 0; } .panel.panel-default.custom .panel-heading { background: #fff; color: #fff; border-radius: 0; } .panel-heading { padding-top: 20px; padding-bottom: 20px; } .panel-heading h4.panel-title { border-radius: 0; border: 0; background-color: #fff; color: #000; text-transform: uppercase; letter-spacing: 3px; } .panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-size: 20px; } .panel-heading h4.panel-title a:active { color: #fff; background-color: #fff; } .panel-heading h4.panel-title a:hover { color: #aaa; } .panel-heading.collapsed { background-color: #fff; } .panel-heading + .panel-collapse > .panel-body { border-top: 1px solid #aaa !important; } .panel-body { padding: 0px !important; border: 0; } .panel-body ul { margin: 0; padding: 0 } .panel-body ul li { padding: 20px 0 !important; background-color: #aaa; border-bottom: 0; font-size: 18px; text-transform: uppercase; letter-spacing: 3px; } .panel-body ul li:last-child { border-bottom: 0 } .panel-body ul { color: #fff; } .panel-body ul li a:link { margin-left: 40px !important; color: #1f1f1f } .panel-body ul li a:hover { text-decoration: none; color: #333333; } #collapseone.panel-collapse, #collapsetwo.panel-collapse, #collapsethree.panel-collapse { padding: 0 } .active[accordion-group] .panel-heading { background-color: #ff5500; } /* ------- ------- form styling --------------------------------------------------------------- ------- */ legend { border: 0; color: #aaa; font-size: 27px; padding-left: 15px; text-transform: uppercase; letter-spacing: 3px; } .form-horizontal .form-group .custom-label { text-align: left; margin-top: -8px; font-size: 20px; color: #fff; font-family: 'lato-regular', verdana, sans-serif; } .form-horizontal .form-group .custom-label.media { padding-top: 20px; } .form-horizontal .form-group .form-control { background-color: #4d4d4d; border: none; border-radius: 3px; font-size: 22px; color: #fff; font-family: 'lato-regular', verdana, sans-serif; } .form-horizontal .form-group .form-control placeholder { color: #fff; } .form-horizontal .form-group .form-control:hover { border: 0; background: #34383c; } .form-horizontal .form-group .form-control:focus { border: 0; box-shadow: none; } .form-horizontal .form-group .changepswrd { margin-top: 2px; font-size: 20px; } .form-horizontal .form-group .changepswrd a:link { color: #fff; display: inline-block; } .form-horizontal .form-group .changepswrd a:hover { text-decoration: none; color: #aaa; } /* account page targets */ .form-horizontal .form-group.social .col-md-2 .fa-instagram, .form-horizontal .form-group.social .col-md-2 .fa-twitter { font-size: 40px; vertical-align: top; margin-right: 10px; } /* custom radio buttons */ .form-horizontal .form-group.radio-btns {} .form-horizontal .form-group .radio.radio-inline { margin-top: 0; } .form-horizontal .form-group .radio { padding-left: 20px; } .form-horizontal .form-group .radio:last-child { margin-left: 40px; } .form-horizontal .form-group .radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 12px; font-size: 22px; } .form-horizontal .form-group .radio label::before { content: ""; display: inline-block; position: absolute; width: 24px; height: 24px; left: 0; margin-left: -20px; border: 2px solid #fff; border-radius: 50%; background-color: #303030; } .form-horizontal .form-group .radio label::after { display: inline-block; position: absolute; content: " "; width: 14px; height: 14px; left: 5px; top: 5px; margin-left: -20px; border-radius: 50%; background-color: #aaa; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .form-horizontal .form-group .radio input[type="radio"] { opacity: 0; z-index: 1; } .form-horizontal .form-group .radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .form-horizontal .form-group .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .form-horizontal .form-group .radio input[type="radio"]:disabled + label { opacity: 0.65; } .form-horizontal .form-group .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .form-horizontal .inner-form { padding-left: 0; } /* ------- ------- footer ------------------------------------------------------------------- ------- */ .footer { background-color: #333333; border-top: 1px solid #4d4d4d; margin-top: 80px; padding-top: 40px; padding-bottom: 20px; padding-right: 40px; } .footer button { letter-spacing: 1px; }<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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"></script> <div class="container-fluid"> <div class="container-fluid"> <div class="row full"> <div class="top"> <div class="col-md-12 header"> <h1>details</h1> </div> </div> <div id="sidebar" class="col-md-2"> <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" href="#collapseone"> page link </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"> page link </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> <!-- end of sidebar --> </div> <div id="main" class="col-md-9"> <div class="row"> <div class="col-md-12 content-load"> <!-- body content loaded test.html --> <div class="main-content"> <h2>details</h2> <form class="form-horizontal" role="form" action="/profile" method="post"> <div class="fieldset form-group"> <legend>heading section</legend> <label for="fname" class="col-md-2 control-label custom-label">first name*</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg firstname" id="input-fname" placeholder="firstname" focus> </div> </div> <div class="fieldset form-group"> <label for="lname" class="col-md-2 control-label custom-label">last name*</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-lname" placeholder="lastname"> </div> </div> <div class="fieldset form-group"> <label for="email" class="col-md-2 control-label custom-label">email*</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-email" placeholder="email"> </div> <div class="col-md-2 custom-col-small"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1" autocomplete="off">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2" autocomplete="off">public</label> </div> </div> </div> <div class="fieldset form-group"> <label for="password" class="col-md-2 control-label custom-label">password*</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-password" placeholder="password"> </div> <div class="col-md-2 col-sm-4 col-xs-4 custom-col-small"> <button type="text" class="btn btn-default btn-lg changepswrd btn-block">change password</button> </div> </div> <div class="fieldset form-group"> <label for="nationality" class="col-md-2 control-label custom-label">nationality*</label> <div class="col-md-6"> <select class="wide"> <option data-display="select language"></option> <option value="1">english (australia)</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div> </div> <div class="fieldset form-group"> <label for="gender" class="col-md-2 control-label custom-label gender-label">gender*</label> <div class="col-md-2 radio-btns"> <input type="radio" name="sex" id="opt-female" value="female" /> <label for="opt-female" class="inline-label female-label"><span class="text">female</span> </label> <input type="radio" name="sex" id="opt-male" value="male" /> <label for="opt-male" class="inline-label male-label"><span class="text">male</span> </label> </div> <div class="input-set"> <div class="col-md-1 col-xs-1"> <input type="radio" name="sex" id="opt-other" value="other" /> <label for="opt-other" class="inline-label radio-select"></label> </div> <div class="col-md-3 col-sm-11 col-xs-12"> <select class="wide"> <option data-display="other"></option> <option value="1">lgbt</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div> </div> <div class="col-md-2 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1" autocomplete="off">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2" autocomplete="off">public</label> </div> </div> </div> <div class="fieldset form-group"> <label for="account" class="col-md-2 control-label custom-label">account type</label> <div class="col-md-6"> <select class="wide"> <option data-display="select account type"></option> <option value="1">option</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div> </div> <div class="fieldset form-group"> <legend>heading section</legend> <label for="nextofkin-fn" class="col-md-2 control-label custom-label">first name</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-nextofkin-fn" placeholder="first name"> </div> </div> <div class="fieldset form-group"> <label for="nextofkin-ln" class="col-md-2 control-label custom-label">last name</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-nextofkin-ln" placeholder="last name"> </div> </div> <div class="fieldset form-group"> <label for="nextofkin-phone" class="col-md-2 control-label custom-label">contact number</label> <div class="col-md-2"> <select class="wide"> <option data-display="select no"></option> <option value="1">aus (+61)</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div> <div class="col-md-4"> <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="number"> </div> </div> <div class="fieldset form-group"> <legend>heading section</legend> <label for="educationlevel" class="col-md-2 control-label custom-label">education level</label> <div class="col-md-6"> <select class="wide"> <option data-display="select level"></option> <option value="1">tertiary</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div> </div> <div class="fieldset form-group"> <label for="institute" class="col-md-2 control-label custom-label">institution name</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="input-institutename" placeholder="university"> </div> </div> <div class="fieldset form-group social"> <legend>heading section</legend> <label for="instagram" class="col-md-2 control-label custom-label with-icons"><span><i class="fa fa-instagram"></i></span> instagram</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="instagram-input" placeholder="@instagramname"> </div> <div class="col-md-2 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1" autocomplete="off">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2" autocomplete="off">public</label> </div> </div> </div> <div class="fieldset form-group social"> <label for="twitter" class="col-md-2 control-label custom-label with-icons"><span><i class="fa fa-twitter"></i></span> twitter</label> <div class="col-md-6"> <input type="text" class="form-control input-text input-lg" id="twitter-input" placeholder="@twittername"> </div> <div class="col-md-2 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1" autocomplete="off">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2" autocomplete="off">public</label> </div> </div> </div> </div> <!-- end of main-content --> <div class="row footer"> <div class="fieldset form-group btn-block"> <div class="pull-right"> <button type="submit" class="btn btn-default btn-lg btn-publish">submit</button> </div> </div> </div> </form> <!-- end of form --> </div> </div> </div> </div> <!-- end of row full --> </div> </div>
there few areas need attention sure don't interpret harsh criticism of form, it's merely help.
- validate html because there numerous errors non-closed items (divs , list items), use of same id more once, , on. can check here manually → nu html checker if aren't using build system or ide/editor supports internally.
- as far responsiveness goes aren't utilizing columns available via bootstraps 12 column grid , (as far can tell) there isn't need nest multiple times particular use case. part you're utilizing 8 columns out of 12 available. using remaining columns rectify forms responsive problem you're seeing.
- another area @ least consider markup , styling isn't consistent (this may reasons aren't related question; the use of jquery plugin one) i'll touch on regardless). (theoretically @ least) save headaches using built in classes across of form inputs (ie
form-controlinput-lg) whether text, select etc (see control sizing). , same idea applies radio-buttons since you're using built in javascript plugin radio inputs ready (button-checkbox-radio).
here 2 working examples can provide base (they have minified in order meet character limits).
example i: sidebar utilizing columns
html *{box-sizing:border-box}body,html{font-family:lato-black,verdana,sans-serif;background-color:#fff;color:#fff;font-size:14px;height:100%}.container-fluid{min-height:100%}.header,.inline-label{color:#fff}#main .content-load,.full{background-color:#000}@media (min-width:992px){#sidebar{width:inherit;min-width:260px;max-width:260px;background-color:#000;float:left;height:100%;position:relative;overflow:auto}#main{width:calc(100% - 260px)}}.main-content{padding-left:15px;padding-right:15px}.main-content h2{color:#fff;font-size:40px;text-transform:uppercase;letter-spacing:2px}#sidebar{padding-left:0;padding-right:0;margin:0;background-color:#fff}.panel-group .panel{border-radius:0;border:0;background-color:#fff;margin-bottom:0}.panel-group .panel+.panel{margin-top:0;border-top:0}.panel-group .panel .panel-heading{background:#fff;color:#fff;border-radius:0;padding-top:20px;padding-bottom:20px}.panel-group .panel .panel-heading .panel-title{border-radius:0;border:0;background-color:#fff;color:#000;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-heading .panel-title a:link{margin-left:10px;text-decoration:none;font-size:20px}.panel-group .panel .panel-heading .panel-title a:active{color:#fff;background-color:#fff}.panel-group .panel .panel-heading .panel-title a:hover{color:#aaa}.panel-group .panel .panel-heading.collapsed{background-color:#fff}.panel-group .panel .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #aaa}.panel-group .panel .panel-body{padding:0;border:0}.panel-group .panel .panel-body ul{margin:0;padding:0}.panel-group .panel .panel-body ul>li{padding:20px 40px;background-color:#aaa;border-bottom:0;font-size:18px;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-body ul>li:last-child{border-bottom:0}.panel-group .panel .panel-body ul>li>a{color:#fff}.panel-group .panel .panel-body ul>li>a:link{color:#1f1f1f}.panel-group .panel .panel-body ul>li>a:hover{text-decoration:none;color:#333}.panel-group .panel #collapseone.panel-collapse,.panel-group .panel #collapsethree.panel-collapse,.panel-group .panel #collapsetwo.panel-collapse{padding:0}.active[accordion-group] .panel-heading{background-color:#f50}.heading{border:0;color:#aaa;font-size:27px;padding-left:15px;text-transform:uppercase;letter-spacing:3px}.form-horizontal .form-group .custom-label,.form-horizontal .form-group .form-control{font-family:lato-regular,verdana,sans-serif;text-transform:capitalize;color:#fff}.form-horizontal .form-group .custom-label{text-align:left;font-size:20px}.form-horizontal .form-group .form-control{background-color:#4d4d4d;border:none;border-radius:3px;font-size:22px}.form-horizontal .form-group .form-control placeholder{color:#fff}.form-horizontal .form-group .form-control:hover{border:0;background:#34383c}.form-horizontal .form-group .form-control:focus{border:0;box-shadow:none}.footer{background-color:#333;border-top:1px solid #4d4d4d;padding:20px;width:100%;text-align:right}.footer button{letter-spacing:1px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid"> <div class="row full"> <div class="top"> <div class="col-md-12 header"> <h1>details</h1> </div></div><div id="sidebar" class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseone"> page link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div><div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapsetwo"> page link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div></div></div><div id="main" class="col-md-10"> <div class="row"> <div class="content-load"> <div class="main-content"> <h2>details</h2> <form class="form-horizontal" action="/profile" method="post"> <div class="form-group"> <div class="heading">heading section</div><label for="fname" class="col-md-3 control-label custom-label">first name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg firstname" id="fname" placeholder="firstname"> </div></div><div class="form-group"> <label for="lname" class="col-md-3 control-label custom-label">last name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="lname" placeholder="lastname"> </div></div><div class="form-group"> <label for="email" class="col-md-3 control-label custom-label">email*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="email" placeholder="email"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">public </label> </div></div></div><div class="form-group"> <label for="password" class="col-md-3 control-label custom-label">password*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="password" placeholder="password"> </div><div class="col-md-4"> <input type="button" class="btn btn-default btn-lg changepswrd btn-block" value="change password"> </div></div><div class="form-group"> <label for="nationality" class="col-md-3 control-label custom-label">nationality*</label> <div class="col-md-9"> <select class="form-control input-lg" id="nationality"> <option value="">select language</option> <option value="1">english (australia)</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div></div><div class="form-group"> <label class="col-md-3 control-label custom-label gender-label">gender*</label> <div class="col-md-2 radio-btns"> <input type="radio" name="sex" id="opt-female" value="female"/> <label for="opt-female" class="inline-label female-label">female</label> <input type="radio" name="sex" id="opt-male" value="male"/> <label for="opt-male" class="inline-label male-label">male</label> </div><div class="col-md-3"> <select class="form-control input-lg"> <option value="">other</option> <option value="1">lgbt</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">public </label> </div></div></div><div class="form-group"> <label for="account" class="col-md-3 control-label custom-label">account type</label> <div class="col-md-9"> <select class="form-control input-lg" id="account"> <option value="">select account type</option> <option value="1">option</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div></div><div class="form-group"> <div class="heading">heading section</div><label for="nextofkin-fn" class="col-md-3 control-label custom-label">first name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextofkin-fn" placeholder="first name"> </div></div><div class="form-group"> <label for="nextofkin-ln" class="col-md-3 control-label custom-label">last name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextofkin-ln" placeholder="last name"> </div></div><div class="form-group"> <label for="nextofkin-phone" class="col-md-3 control-label custom-label">contact number</label> <div class="col-md-6"> <select class="form-control input-lg" id="nextofkin-phone"> <option value="">select no</option> <option value="1">aus (+61)</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div><div class="col-md-3"> <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="number"> </div></div><div class="form-group"> <div class="heading">heading section</div><label for="education" class="col-md-3 control-label custom-label">education level</label> <div class="col-md-9"> <select class="form-control input-lg" id="education"> <option value="">select level</option> <option value="1">tertiary</option> <option value="2">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> <option value="4">another option</option> </select> </div></div><div class="form-group"> <label for="institute" class="col-md-3 control-label custom-label">institution name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="institute" placeholder="university"> </div></div><div class="form-group social"> <div class="heading">heading section</div><label for="instagram" class="col-md-3 control-label custom-label with-icons"><span><i class="fa fa-instagram"></i></span> instagram</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="instagram" placeholder="@instagramname"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">public </label> </div></div></div><div class="form-group social"> <label for="twitter" class="col-md-3 control-label custom-label with-icons"><span><i class="fa fa-twitter"></i></span> twitter</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="twitter" placeholder="@twittername"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">public </label> </div></div></div><div class="footer"> <button type="submit" class="btn btn-default btn-lg">submit</button> </div></form> </div></div></div></div></div></div>example ii: fixed position sidebar without use of columns
*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:lato-black,verdana,sans-serif;font-size:14px;height:100%;background-color:#fff;color:#fff}body{min-height:100%;height:100%}@media (min-width:992px){div.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;min-width:260px;margin-left:260px;height:100%;background-color:#fff}div.main-content{position:relative;margin-left:260px;padding:0 15px}}div.main-content{background-color:#231f20}div.main-content h2{color:#fff;font-size:40px;text-transform:uppercase;letter-spacing:2px}div.sidebar{padding:0;margin:0;background-color:#fff}div.sidebar h1{color:#231f20;margin:0;padding:15px 20px 0;letter-spacing:3px}.panel-group .panel{border-radius:0;border:0;background-color:#fff;margin-bottom:0}.panel-group .panel+.panel{margin-top:0;border-top:0}.panel-group .panel .panel-heading{background:#fff;color:#fff;border-radius:0;padding-top:20px;padding-bottom:20px}.panel-group .panel .panel-heading .panel-title{border-radius:0;border:0;background-color:#fff;color:#000;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-heading .panel-title a:link{margin-left:10px;text-decoration:none;font-size:20px}.panel-group .panel .panel-heading .panel-title a:active{color:#fff;background-color:#fff}.panel-group .panel .panel-heading .panel-title a:hover{color:#aaa}.panel-group .panel .panel-heading.collapsed{background-color:#fff}.panel-group .panel .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #aaa}.panel-group .panel .panel-body{padding:0;border:0}.panel-group .panel .panel-body ul{margin:0;padding:0}.panel-group .panel .panel-body ul>li{padding:20px 40px;background-color:#aaa;border-bottom:0;font-size:18px;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-body ul>li:last-child{border-bottom:0}.panel-group .panel .panel-body ul>li>a{color:#fff}.panel-group .panel .panel-body ul>li>a:link{color:#1f1f1f}.panel-group .panel .panel-body ul>li>a:hover{text-decoration:none;color:#333}.panel-group .panel #collapseone.panel-collapse,.panel-group .panel #collapsethree.panel-collapse,.panel-group .panel #collapsetwo.panel-collapse{padding:0}.active[accordion-group] .panel-heading{background-color:#f50}.form-heading{border:0;color:#aaa;font-size:26px;padding:0 0 10px 15px;text-transform:uppercase;letter-spacing:3px}.form-horizontal .form-group .custom-label{text-align:left;font-size:20px;color:#fff;font-family:lato-regular,verdana,sans-serif}.form-horizontal .form-group .form-control{background-color:#4d4d4d;border:none;border-radius:0;font-size:16px;color:#fff;font-family:lato-regular,verdana,sans-serif}.form-horizontal .btn{border-radius:0;height:50px}.form-horizontal .form-group .form-control placeholder{color:#fff}.form-horizontal .form-group .form-control:hover{border:0;background:#34383c}.form-horizontal .form-group .form-control:focus{border:0;box-shadow:none}.submit-block{background-color:#333;border-top:1px solid #4d4d4d;padding:20px}.submit-block .btn-publish{letter-spacing:1px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="sidebar"> <h1>details</h1> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseone"> page link </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><li><a href="#"> sub link</a> </li><li><a href="#"> sub link</a> </li></ul> </div></div></div><div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapsetwo"> page link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div></div></div><div class="container-fluid main-content"> <h2>details</h2> <form class="form-horizontal" action="/profile" method="post"> <div class="form-group"> <div class="form-heading">heading section</div><label for="fname" class="col-md-3 control-label custom-label">first name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" name="fname" id="fname" placeholder="first name"> </div></div><div class="form-group"> <label for="lname" class="col-md-3 control-label custom-label">last name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" name="lname" id="lname" placeholder="last name"> </div></div><div class="form-group"> <label for="email" class="col-md-3 control-label custom-label">email*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" name="email" id="email" placeholder="email"> </div><div class="col-md-4"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1">private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2">public </label> </div></div></div><div class="form-group"> <label for="password" class="col-md-3 control-label custom-label">password*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" name="password" id="password" placeholder="password"> </div><div class="col-md-4"> <input type="text" class="btn btn-default btn-lg changepswrd btn-block" value="change password"> </div></div><div class="form-group"> <label for="nationality" class="col-md-3 control-label custom-label">nationality*</label> <div class="col-md-9"> <select class="form-control input-lg" id="nationality" name="nationality"> <option value="">select language</option> <option value="1">english (australia)</option> <option value="2">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> </select> </div></div><div class="form-group"> <label for="opt-female" class="col-md-3 control-label custom-label gender-label">gender*</label> <div class="col-md-5"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="sex" id="opt-female">female</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="sex" id="opt-male">male</label> </div></div><div class="col-md-4"> <select class="form-control input-lg"> <option value="">other</option> <option value="1">lgbt</option> <option value="2">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> </select> </div><div class="col-md-9 col-md-offset-3"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-gender">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-gender">public</label> </div></div></div><div class="form-group"> <label for="account" class="col-md-3 control-label custom-label">account type</label> <div class="col-md-9"> <select class="form-control input-lg" id="account" name="account"> <option value="">select account type</option> <option value="1">option</option> <option value="2">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> </select> </div></div><div class="form-group"> <div class="form-heading">heading section</div><label for="nextofkin-fn" class="col-md-3 control-label custom-label">first name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextofkin-fn" placeholder="first name"> </div></div><div class="form-group"> <label for="nextofkin-ln" class="col-md-3 control-label custom-label">last name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextofkin-ln" placeholder="last name"> </div></div><div class="form-group"> <label for="nextofkin-phone" class="col-md-3 control-label custom-label">contact number</label> <div class="col-md-4"> <select class="form-control input-lg" id="nextofkin-phone" name="nextofkin-phone"> <option value="">select one</option> <option value="1">aus (+61)</option> <option value="2">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> </select> </div><div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="number"> </div></div><div class="form-group"> <div class="form-heading">heading section</div><label for="educationlevel" class="col-md-3 control-label custom-label">education level</label> <div class="col-md-9"> <select class="form-control input-lg" id="educationlevel" name="educationlevel"> <option value="">select level</option> <option value="1">tertiary</option> <option value="2">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> <option value="4">option</option> </select> </div></div><div class="form-group"> <label for="institute" class="col-md-3 control-label custom-label">institution name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="institute" placeholder="university"> </div></div><div class="form-group social"> <div class="form-heading">heading section</div><label for="instagram" class="col-md-3 control-label custom-label"> <span class="fa fa-instagram"></span> instagram</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="instagram" placeholder="@instagramname"> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-instagram">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-instagram">public</label> </div></div></div><div class="form-group social"> <label for="twitter" class="col-md-3 control-label custom-label"> <span class="fa fa-twitter"></span> twitter</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="twitter" placeholder="@twittername"> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-twitter">private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-twitter">public</label> </div></div></div><div class="row"> <div class="col-md-9 col-md-offset-3"> <div class="submit-block"> <button type="submit" class="btn btn-default btn-lg btn-block btn-publish">submit</button> </div></div></div></form> </div>
Comments
Post a Comment