html - Fixing footer issues in web page which is powered by bootstrap -
i've requirement if size of browser less 992*1024
, scrolling added automatically. footer wrote working, i'm unable position media
part. wrote footer shown in screen shot:
i'm trying create footer similar this:
here code.
.imgcontainer { background: #e6e6e6; box-shadow: 0 4px 2px 1px #000; } #footer { height: 350px; background: #003663; min-width: 992px; } #footeritems { min-width: 992px; width: 100%; padding: 0px 6%; min-width: 992px; } #footeritems div { display: inline-block; color: #fff; padding-top: 2%; font-weight: bold; font-size: 16px; } .accountpos { padding-left: 3%; } #footeritems div ul { padding-left: 0; } #footeritems div ul li { list-style-type: none; font-weight: 400; font-size: 13px; font-style: italic; } #videoptions { height: 74px; width: 23px; background-color: #4c5053; } #footeritems div video { min-width: 35px; min-height: 30px; } .socialinks { min-width: 450px; width: 39%; float: left; } .slinks { padding-left: 14%; }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div id="footer"> <div class="col-md-12 imgcontainer"> <img src="images/bistip-in-media.png" class="center-block"> </div> <div id="footeritems" class="col-md-12"> <div style="width: 12%;">about <ul> <li>about us</li> <li>media reviews</li> <li>bistip guide</li> </ul> </div> <div class="accountpos" class="">account information <ul> <li>about us</li> <li>media reviews</li> <li>bistip guide</li> </ul> </div> <div class="accountpos" class="col-md-3" style="padding-left: 9%;">market <ul> <li>about us</li> <li>media reviews</li> <li>bistip guide</li> </ul> </div> <div class="accountpos" style="padding-left: 9%;">bistip <ul> <li>about us</li> <li>media reviews</li> <li>bistip guide</li> </ul> </div> <div class="" style="padding-top: 2%;">media <div> <video controls height="30" width="60"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">your browser not support video tag. </video> </div> </div> <div class="socialinks"> <div> <img src="images/fb.png" alt="f" style="width: 29%;">facebook </div> <div class="slinks"> <img src="images/tw.png" alt="t">twitter </div> <div class="slinks"> <img src="images/go.png" alt="g">google+ </div> </div> </div> </div>
everything looks good, media
part isn't coming properly. how can fix it? jsfiddle link given here.
first of re-organize code correctly according bootstrap grid system. use container , row class , place columns inside row.
Comments
Post a Comment