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 add a disabled internal Style node to HTML5 DOM?

    How to animate X number of divs using CSS and javascript?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to animate some parts of an image using CSS?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to mimic Photoshop “Color Overlay” in CSS

    Can't figure out how to code my css

    How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse

    How to use nth-child with only direct children?

    How to centering a form

    How to fold/unfold a DIV like on this website

    How to include css from resources folder in symfony 2

    How to include css in my JSP?

    How to set CSS property in adjacent elements?

    How to make the table fit to the mobile screen size in css?

    How would I achieve this CSS effect (centering content and padding)?

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How to make layout with 3 elements where 1 is resizable

    How to attach user CSS to Microsoft Edge?

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How to set 0% css of keyframes as current css value for the element?

    How to css this?

    How to force IE to place two div boxes next to each other in it's browser window?

    How do I remove the side padding in the following case?

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    Avoid the height change of a container + how to position a list item at end

    using css, how to position image so when resizing window, image will not move

    how to arrange divs with css as a grid?

    How to remove all the borders of a selectbox?