html - How to make text "Passed" and progress bar appear in line in smaller views? -
i have made following design using bootstrap.
<!doctype html> <html> <head> </head> <body> <div class="container-fluid parent-vertical-align"> <div class="container-fluid child-vertical-align" style="width: 99%;"> <div class="row row-centered"> <!-- block 1 --> <div class="col-md-3 center-block"> <div> <!-- thumb-nail image --> <div> <img src="img/a.png" class="img-responsive" /> </div> <!-- status bars --> <br/><br/> <div class="row"> <div class="col-md-3"> passed <br/><br/> failed <br/><br/> skipped <br/> </div> <div class="col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 80%"> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 60%"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous"> <!-- custom css file --> <link rel="stylesheet" href="custom.css" type="text/css"> </body> </html> and here custom css file
body,html { height: 100%; } .parent-vertical-align{ display: table; height: 100%; width: 100%; } .child-vertical-align{ width: 100%; padding: 1%; display: table-cell; vertical-align: middle; height: 90%; } .img-responsive{ margin: 0 auto; height: 20%; width: 20%; } .center-block{ display:inline-block; float:none; text-align:left; margin-top: 2%; margin-left: 2%; border: 1px solid black; } .row-centered{ text-align:center; } .progress{ margin-left: 10%; } the problem is, when resize chrome window, design progress bar goes next line. please refer image:
i want displayed right side of text. work on larger screens, doesn't work on smaller ones. how can fix it?
bootstrap provides media query class acccording diffrent screen sizes
use
col-xs-4 maximum 768px col-sm-4 768px 992px col-md-4 992px 1200px col-lg-4 greater 1200px body,html { height: 100%; } .parent-vertical-align{ display: table; height: 100%; width: 100%; } .child-vertical-align{ width: 100%; padding: 1%; display: table-cell; vertical-align: middle; height: 90%; } .img-responsive{ margin: 0 auto; height: 20%; width: 20%; } .center-block{ display:inline-block; float:none; text-align:left; margin-top: 2%; margin-left: 2%; border: 1px solid black; } .row-centered{ text-align:center; } .progress{ margin-left: 10%; }<!doctype html> <html> <head> </head> <body> <div class="container-fluid parent-vertical-align"> <div class="container-fluid child-vertical-align" style="width: 99%;"> <div class="row row-centered"> <!-- block 1 --> <div class="col-md-3 center-block"> <div> <!-- thumb-nail image --> <div> <img src="img/a.png" class="img-responsive" /> </div> <!-- status bars --> <br/><br/> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-3"> passed <br/><br/> failed <br/><br/> skipped <br/> </div> <div class="col-xs-8 col-sm-9 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 75%"> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 75%"> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:75%"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous"> <!-- custom css file --> <link rel="stylesheet" href="custom.css" type="text/css"> </body> </html>
Comments
Post a Comment