i new bootstrap, trying achieve in attached image can't text area 3 &4 display.
here code below suggestions welcome. looking tutorial on grid system here link image
<div class="container-fluid"> <div class="jumbotron"> <center> <h1>bootstrap tutorial</h1> <p> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </p> <input type="button" class="btn btn-info" value="order service "> </center> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8" > <!-- first row 8 div--> <div class="short-div"> <div class="well well-sm"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> </div> <!-- second row 8 div--> <div class="short-div"> <div class="well well-sm"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> </div> <!-- third row 8 div--> <div class="short-div"> <!--left 4 div--> <div class="col-md-4 col-sm-4" style="background-color:forestgreen"> </div> <!--right 4 div--> <div class="col-md-4 col-sm-4" style="background-color:blue"> </div> </div> </div> </div> </div> </div>
remember when want subdivide row, need calculate width respect 12 grid system of parent element instead of body.
use col-md-6 instead of col-md-4 since divide parent element columns , not three.
your required layout in code below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="jumbotron"> <center> <h1>bootstrap tutorial</h1> <p> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </p> <input type="button" class="btn btn-info" value="order service "> </center> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8"> <!-- first row 8 div--> <div class="short-div"> <div class="well well-sm"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> </div> <!-- second row 8 div--> <div class="short-div"> <div class="well well-sm"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> </div> <!-- third row 8 div--> <div class="short-div"> <!--left 4 div--> <div class="col-xs-6 col-md-6 col-sm-6 well"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> <!--right 4 div--> <div class="col-xs-6 col-md-6 col-sm-6 well"> bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. bootstrap popular html, css, , js framework developing responsive, mobile-first projects on web. </div> </div> </div> </div> </div>
Comments
Post a Comment