htmlcssgwtbootstrap3

GWTBootstrap row appears as a column instead of a row


I am just starting to use bootstrap to convert an existing GWT project. In the following code my first img, h3 and second img are in a single column (one under the other) instead in a single row (next to each other).

<div id="login"  class="container-fluid" style="background-repeat: repeat; background-image: url('body-bg.jpg'); display:flex;">

        <div class="row">
            <div class="col-md-4">
                <img class="myimg" alt="Bootstrap Image Preview" src="logo.png" style="width: 130px;" />
            </div>
            <div class="col-md-4">
                <h3> Welcome to the Award Tracker login page. </h3>
            </div>
            <div class="col-md-4">
                <img class="myimg" alt="Bootstrap Image Preview" src="1stER_icon_256.png" style="width: 130px;" />
            </div>
        </div> <!-- /row -->

        <div class="row">
            <div class="col-md-12">
                <form class="form-signin">
                    <h2 class="form-signin-heading">Please sign in</h2>
                    <input id="accountName" type="text" class="input-block-level" placeholder="Email address">
                    <input id="enterPassword" type="password" class="input-block-level" placeholder="Password">
                    <button id="submit" class="btn btn-large btn-primary" type="submit">Sign in</button>
                </form>
            </div>
        </div> <!-- /row -->

    </div> <!-- /container -->

How do I get my first row to be a row instead of a column please?

Also, is there a way to make the img shrink as I shrink the page?

I used http://www.layoutit.com/build to create this and made very few changes. Is there a good free product I can download as my internet is very very slow.


Solution

  • check the code below, two things

    1st: added display:flex; to your header container (note: flex are not supported by old IE etc... for more info check here make sure you can use it http://caniuse.com/#feat=flexbox).

    2nd: added css to make img response

    3rd: left img align to left, right img align to right

    .myimg {
        width: 100%;
        height: auto;
    }
    

    hope it helps =D

    .myheader {
      display: flex;
    }
    
    .myimg {
      width: 100%;
      height: auto;
    }
    
    .pull-right {
      text-align: right;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    
    <div id="login" class="container-fluid" style="background-repeat: repeat; background-image: url('body-bg.jpg');">
    
      <div class="row myheader">
        <div class="col-md-4">
          <img class="myimg" alt="Bootstrap Image Preview" src="logo.png" />
        </div>
        <div class="col-md-4">
          <h3> Welcome to the Award Tracker login page. </h3>
        </div>
        <div class="col-md-4">
          <img class="myimg  pull-right" alt="Bootstrap Image Preview" src="1stER_icon_256.png" />
        </div>
      </div>
      <!-- /row -->
    
      <div class="row">
        <div class="col-md-12">
          <form class="form-signin">
            <h2 class="form-signin-heading">Please sign in</h2>
            <input id="accountName" type="text" class="input-block-level" placeholder="Email address">
            <input id="enterPassword" type="password" class="input-block-level" placeholder="Password">
            <button id="submit" class="btn btn-large btn-primary" type="submit">Sign in</button>
          </form>
        </div>
      </div>
      <!-- /row -->
    
    </div>
    <!-- /container -->