How to make text “Passed” and progress bar appear in line in smaller views?


Tags: html,css,twitter-bootstrap,css3,twitter-bootstrap-3

Problem :

I have made the 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 and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Latest compiled and 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 is my 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 I resize my chrome window, the design progress bar goes to the next line. Please refer to this image:

enter image description here

I want it to be displayed exactly to the right side of the text. It does work on larger screens, but doesn't work on smaller ones. How can I fix it?



Solution :

bootstrap provides media query class acccording to diffrent screen sizes

use

col-xs-4 for maximum 768px

col-sm-4 for 768px to 992px
col-md-4 for 992px to 1200px
col-lg-4 for greater than 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 and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Latest compiled and 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>


    CSS Howto..

    How to get css 3 column layout with floats and no margins?

    How to apply a complex style to the selection of a Select2 component?

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    How to change the value depend on css animation?

    Bootstrap modal: how to fade in, but immediately disappear on close

    how to change stack order of of text label in JavaScript?

    How can I mark it up? [closed]

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    How to use setInterval

    How to have a multiline CSS horizontal scroll?

    Responsive CSS - how to 'dynamically' align div to parent width with padding/margin?

    How to make a div tag without margins in css? [duplicate]

    How to prevent ALT text showing on cursor hover over image?

    How to restrict character limit by line or # of characters with css?

    How to remove the arrows in a scroll bar through CSS

    PHP imagecopyresampled + how to get the best results

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How can I generate a random color with Stylus CSS?

    How to put a css tag in an element if another has this element [closed]

    how to fix the css padding in this situation?

    How to change scrollbar in textarea input?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How can I make a fixed div JUMP when scrolling?

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to reset default button style in Firefox 4 +

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to use html entities in CSS content property?

    How to make links in line

    How do I investigate a “style sheet could not be loaded” message in Firefox?