Bad layout and wrapping on simple Bootstrap page

653
November 25, 2016, at 11:02 PM

I am trying to create a simple Bootstrap page that has four input fields each with a side button. The four input fields to be in a line horizontally and centered across the screen.

With the code I have written the fields are offset to the right (so not centered) and when the screen is shrunk the wrapping looks awful. My code looks like this:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>WIA</title> 
 
    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <style> 
        .wia-color { 
            color: #00DDDD; 
        } 
 
        .wia-navbar-logo { 
            margin-top: -6px; 
            max-height: 44px; 
            height: 44px; 
        } 
 
        .wia-top-section { 
            height: 800px; 
            background-color: transparent; 
        } 
 
        .wia-logo-strapline { 
            margin-top: 0px; 
            max-height: 123px; 
            height: 123px; 
        } 
 
        .wia-strapline-text { 
            color: white; 
            font-size: 40px !important; 
            font-family: Open Sans; 
            font-weight: 100; 
            font-style: normal; 
            margin-top: 38px; 
        } 
 
        .wia-filter-column { 
            width: 280px; 
        } 
 
        .wia-filter-row { 
            color: white; 
            margin-top: 50px; 
            font-size: 18px; 
            font-weight: 400; 
        } 
 
        .wia-filter-container { 
            width: 250px; 
            white-space: nowrap; 
            float:left; 
        } 
        .wia-filter-label { 
            color: white; 
            font-size: 18px; 
            font-weight: 200; 
            float: left; 
            padding-left: 10px; 
            margin-bottom: 4px; 
        } 
 
        .wia-filter-value { 
            value: 'xxx'; 
            width: 200px; 
            height: 30px; 
            background-color: #141414; 
            border-style: solid; 
            border-left-width: 3px; 
            border-left-color: #00DDDD; 
            border-top: none; 
            border-bottom: none; 
            border-right: none; 
            color: white; 
            font-size: 18px; 
            font-weight: 200; 
            padding-left: 4px; 
        } 
 
        .wia-filter-button { 
            width: 30px; 
            height: 30px; 
            background-color: #222626; 
            color: #00DDDD; 
            border: none; 
            vertical-align: top; 
            margin-left: -5px; 
            font-weight:100; 
        } 
 
        /* Remove the navbar's default margin-bottom and rounded borders */ 
        .navbar { 
            margin-bottom: 0; 
            border-radius: 0; 
        } 
 
        .navbar-inverse { 
            background-color: #222626; 
            height: 64px; 
            max-height: 64px; 
            min-height: 64px; 
        } 
    </style> 
</head> 
 
<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
                <span class="icon-bar"></span> 
            </button> 
            <a class="navbar-brand" href="#"> 
            </a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
 
            <ul class="nav navbar-nav navbar-right"> 
                <li><a href="#">About</a></li> 
                <li><a href="#">Donate</a></li> 
            </ul> 
        </div> 
    </div> 
</nav> 
 
<div class="jumbotron wia-top-section"> 
    <div class="container-fluid"> 
        <div class="row wia-filter-row"> 
            <div class="col-sm-2"> 
            </div> 
            <div class="col-sm-2 wia-filter-column"> 
                <div class="wia-filter-label"> 
                    What 
                </div> 
                <br/> 
                <div class="wia-filter-container"> 
                    <input class="wia-filter-value" type="text" placeholder="One"> 
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
                </div> 
            </div> 
            <div class="col-sm-2 wia-filter-label wia-filter-column"> 
                <div class="wia-filter-label"> 
                    Where 
                </div> 
                <br/> 
                <div class="wia-filter-container"> 
                    <input class="wia-filter-value" type="text" placeholder="Two"> 
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
                </div> 
            </div> 
            <div class="col-sm-2 wia-filter-label wia-filter-column"> 
                <div class="wia-filter-label"> 
                    When 
                </div> 
                <br/> 
                <div class="wia-filter-container"> 
                    <input class="wia-filter-value" type="text" placeholder="Three"> 
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
                </div> 
            </div> 
            <div class="col-sm-2 wia-filter-label wia-filter-column"> 
                <div class="wia-filter-label"> 
                    Who 
                </div> 
                <br/> 
                <div class="wia-filter-container"> 
                    <input class="wia-filter-value" type="text" placeholder="Four"> 
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
                </div> 
            </div> 
            <div class="col-sm-2"> 
            </div> 
        </div> 
    </div> 
    <div class="container wia-filter-label text-center"> 
        SOME MORE STUFF 
    </div> 
</div> 
 
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

I have created a plunker here:

https://plnkr.co/edit/V0KVM1J2xX1FRAiFYW16?p=preview

Answer 1

The thing is that column elements in bootstrap are naturally floated, thus will always try to adjust to one side (in this case left).

You can try to set the CSS as something like:

.wia-filter-row {
 text-align:center;
}
.wia-filter-row .col-sm-2{
 float:none;
 display: inline-block;
}

So you can have the columns with the proper width and displayed in one line. By the way you don't need the empty divs to force the spacing. You can use the col-sm-offset-2.

Answer 2

This is what i would do. Use bootstrap grid for the layout and add my own class to change the colors. This should help you understand and create better grids.

In the code, i have used everything bootstrap has to offer along with my custom class on 2nd button so that you can understand.

Check the code here : http://codepen.io/hunzaboy/pen/RogvQj

<div class="container" style="margin-top: 30px;">
  <div class="row">
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control form-custom" aria-label="..." placeholder="Button with class">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default btn-custom dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
  </div>
  <!-- /.row -->
</div>
READ ALSO
navigation tabs with changing icon image

navigation tabs with changing icon image

I am trying to make tab navigation with changing image icon, I tried to do it with angular ng-show & ng-hid for icon images but the result was flickeringIs there any easier way to do it?enter image description here

595
Fixed element out of screen on mobile

Fixed element out of screen on mobile

I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript)Iframe should be placed in bottom right corner

663
in html Showing site step by step guide line navigation technical name

in html Showing site step by step guide line navigation technical name

I am seeing so many site are using step by step guide line to show their site's features or newly added controlsBy clicking on next button its navigate and show detail in popover/tooltip

398
How Can I Use typeahead in Input Filed to get the Values in Angularjs?

How Can I Use typeahead in Input Filed to get the Values in Angularjs?

I am using MEAN stack in my application with AngularJS as my front-endHow can i use typeahead in input filed to get the values in angularjs , actually we get the value if we using select option, but we expecting for type-ahead option

424