使用引导程序进行响应式布局

Question

    <div class="jumbotron vertical-center bgpurpletextoffwhite"> 
        <div class="container">
            <div class="row">
                <div class="col-xs-2 col-sm-5 col-md-5">
                </div>
                <div class="col-xs-3 col-sm-1 col-md-1">
                  <img src="./assets/images/pmflogo-transparent.png"/>
                </div>
                <div class="col-xs-7 col-sm-6 col-md-6">
                 <br>
                    <h3>Put Me First </h3>
                </div>
           </div>

This is my code. I want it to be responsive for all devices, but it is not acting responsive at present. What changes do I need to do in order to make it responsive.

Answer 1

It should be responsive if you are using bootstrap and your code is correct. You are also missing 2 closing div tags </div> in your code.

Here is a fiddle : https://jsfiddle.net/jaephoenix/h86mabte/

Your code should look like this:

<div class="jumbotron vertical-center bgpurpletextoffwhite"> 
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-5 col-md-5">
            </div>
            <div class="col-xs-3 col-sm-1 col-md-1">
                <img src="s30.postimg.org/ozhb3rw8t/pmflogo.png"/>
            </div>
            <div class="col-xs-7 col-sm-6 col-md-6">
                <br />
                <h3>Put Me First </h3>
            </div>
        </div> <!-- Close div for .row -->
     </div> <!-- Close div for .container -->
</div> <!-- Close div for .jumbotron -->