HTML / CSS / JS / Bootstrap - Aligning content -

HTML / CSS / JS / Bootstrap - Aligning content -

i working on creating form page. have broken problem 3 meta challenges:

creating navigation within form producing various inputs form appropriately display items #2 based on selections in #1.

right now, working on item #2

i have attached output of code within coda 2

i'm using accordion #1 , appears work fine. when add together first 2 items #2, appear work fine, staying aligned expected next accordion.

ideally, want align lower radio buttons subsequent form inputs below radio button/text inputs outside sidebar , not wrap under accordion , sidebar. happening now.

i'm missing how apply content within bootstrap grid appropriately using containers, rows , class=col-md-n.

marston

here think relevant code:

<!-- standard document stuff + jumbotron ---> <div class="container-fluid"> <div class="sidebar"> <div class="col-md-2"> <div class="panel-group" id="accordion"> <!-- navigation items ---> <!-- lots of working code produces accordion ---> </div> </div> </div> <hr/> <!-- radio buttons ---> <form class="form-horizontal"> <fieldset> <!-- bunch of working code here produces radio buttons ---> </fieldset> </form> <hr/> <!-- text input ---> <div class="main content active content"> <form role="form"> <div class="col-md-3"> <!-- more code here produces text input ---> </div> <!-- repeats each form grouping ---> <!-- more code works ---> </form> </div> </div> <!-- check box section _--> <!-- preferred contact time ---> <form role="form"> <fieldset> <div class="form-group"> <label class="col-md-3 control-label" for="radios1">available weekdays</label> <div class="col-md-3"> <!-- lots of radio button code ---> </div> </div> <!-- repeats 2nd set ---> </fieldset> </form>

for disclosure, haven't tasted code.

from quick have noticed you're not putting "col"s rows. cause layout deed strange.

standard way construction elements utilize col within row within container :

<div class="container-fluid"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-9"></div> </div> </div>

hope helps.

html css twitter-bootstrap-3