html - Cannot get fields on right place and inside border divs, using bootstrap -

i have box has settings information, using bootstrap, not sure why messing up. want create similar this.

so write codes this

<!-- settings  -->     <div class="col-md-8 col-md-offset-1">         <div class="bsettings">             <h2>settings</h2>                 <div class="col-md-12">                   <div class="noticebox">                        <h3>hello world hello world</h3>                    <p>lorem ipsum alit berket usum , amazing</p>                    <button type="button" class="btn btn-primary  active">on</button>                    <button  type="button" class="btn btn-primary  ">off</button>                  </div>          </div>      </div><!-- /.borrow-settings --> 

so bsettings outside box, , noticebox oval looking box in is, not able push buttons right , text on left. tried using bootstrap classes pull-right , tried dividing classes col-md-8 , col-md-4 this

<div class="col-md-8 col-md-offset-1">         <div class="bsettings">             <h2>settings</h2>                    <div class="noticebox">                       <div class="col-md-8">                    <h3>hello world hello world</h3>                    <p>lorem ipsum alit berket usum , amazing</p>                    </div>                    <div class="col-md-4">                       <button type="button" class="btn btn-primary  active">on</button>                    <button  type="button" class="btn btn-primary  ">off</button>                     </div>                 </div>              </div> 

which breaks boxes on page, styles wrote both of classes ,

.bsettings{     border : 1px solid #eeeeee; } .bsettings h2{     color: #666;     font-size:20px;     padding: 10px 10px 10px 40px;  } .bsettings .noticebox{     border: 1px solid #eeeeee;     border-radius : 20px;     padding: 20px; } 

so need in creating picture provided guess mixing bootstrap classes. , reason have col-md-8 col-mdoffset-1 @ starting because have side bar well, using else needs there. added js fiddle here https://jsfiddle.net/fne081z3/

add row <div class="row"> before col-md-8 inside noticebox div.

css

  .noticebox{     border: 1px solid #eaeaea;     border-radius: 10px;     padding: 0 15px;   }   .notice-btns{     border-radius: 0;     // set min-height equaling height of noticebox   }   .notice-btns:last-child{     border-top-right-radius:10px;     border-bottom-right-radius:10px;   } 

html

<div class="row">   <div class="col-md-8 col-md-offset-1">     <div class="bsettings">       <h2>settings</h2>        <div class="noticebox">             <div class="row">                 <div class="col-md-8">             <h3>hello world hello world</h3>             <p>lorem ipsum alit berket usum , amazing</p>           </div>            <button type="button" class="col-md-2 notice-btns btn btn-primary  active">on</button>           <button  type="button" class="col-md-2 notice-btns btn btn-primary  ">off</button>           </div>       </div>     </div>    </div> </div>