Need help in aligning items together in Bootstrap grid layout

Question

I am trying to align 7 items in a grid layout so that each element is fixed in it's place currently I am able to achieve like below screenshot. Here is the plunker for the same code (but some how it does not look good on plunker).

enter image description here

The problem in my current state is minutes is wrapped to 2nd line. Also how can I utilise extra space from Agent: label area and Reset button area so that the space gets utilised?

Code

<div class="row">
    <div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
        <div ng-show="!loadinga">
            <b>Agent: </b>
        </div>
    </div>
    <div class="col-md-2" style="padding-left:0px;">
        <div class="dropdown " ng-show="!loadinga">
            <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
                {{dropDownTitle}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                <li ng-repeat="agent in agentListData">
                    <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-2" style="padding-left:0px;">
        <div class="dropdown " ng-show="!loadinga">
            <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
                {{dropDownAllTaskStatusTitle}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
                <li ng-repeat="task in taskStatusListData">
                    <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
        <div ng-show="!loadinga">
            <input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text" ng-blur="" />
        </div>
    </div>
    <div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
        <input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
        <label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running &lt; </label>
        <input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
    </div>
    <div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
        <input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
        <label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
    </div>
    <div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
        <button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
    </div>
</div>

Update

Or is there a way to keep Agent: label and drop down in same line without giving separate div with col-md-1 class to label?

Need something like below screenshot

enter image description here

Is this full screen? or a boxed layout? E.g. Is that navbar a sidebar attached to the left hand side of the screen? — Zac Grierson, Jul 16 '15 at 13:19

Lansana Camara · Answer 1 · 2015-07-16T12:57:38.193

2

Your parent divs (the columns) should be set to 0 padding and 0 margin, and the childs should have whatever padding/margin you want. This prevents an overflow.

For example, if you have 4 columns (which equal to 25% width each) and even one of them has a left or right padding of like 10px, then the 4th column will be pushed to the next line because they are now exceeding the 100% width.

Bad example:

HTML:

<div class="col-1">
    //content
</div>
<div class="col-2">
    //content
</div>

CSS:

.col-1, .col-2 { width: 50%; display: inline-block; padding-left: 15px }

The above code will have the second column flow to the next line because of that padding-left of 15px, which you also use in your own code.

Good example:

HTML:

<div class="col-1">
    <div class="inner-col-1">
        //content
    </div>
</div>
<div class="col-2">
    <div class="inner-col-2">
        //content
    </div>
</div>

CSS:

.col-1, .col-2 { width: 50%; display: inline-block }
.inner-col-1, .inner-col-2 { padding: 0 15px }

The above code will ensure that your columns are on the same line, and the inner content can now use whatever padding/margins you want because they won't affect the width of the parents.

edited Jul 16 '15 at 12:57

answered Jul 16 '15 at 12:51

Lansana Camara

9,497
11
47
87

I examined in chrome debugger the parent `div`s does not have left & right paddings, but whole element is occupying the column – AabinGunz Jul 16 '15 at 12:55
Check new edits, see if that will solve your problem. Make sure the "Good example" is the same with even your inner content if they use a set width and act as a parent to child divs within them. – Lansana Camara Jul 16 '15 at 12:58
The Good example is a bad example due to nesting existing natively in the bootstrapcdn, not only is it breaking the **Do not repeat yourself**, I'm sure bootstrap handle it better.. – Zac Grierson Jul 16 '15 at 14:28
I was showing him the HOW's and WHY's. That code is not using Bootstrap, it is using my own created grid system to explain to him what was going wrong and how he can fix it. – Lansana Camara Jul 16 '15 at 14:33

score 2 · Answer 2 · answered Jul 16 '15 at 13:09

2

If you don't need to use the application on another screen size, you could try to align Agent: to the right of his container and the reset button to the left of the container. You could the set negative margins to the row, that would give you more place for your content.

Otherwise, bootstrap gives you the possibility to subdivise each column into 12 new columns, you could try something like this :

<div class="row">
   <div class="col-md-6">
      <!-- you can put here the 4 first elements as you like, on a 12 columns layout -->
   </div>
   <div class="col-md-6">
      <!-- you have again a 12 columns layout for the 3 lasts elements -->
   </div>
</div>

look at http://getbootstrap.com/examples/grid/ in the section "Two columns with two nested columns" for a visual example

answered Jul 16 '15 at 13:09

tagette

68
4

This is correct also, nesting the column would also give you good control, unfortunately the required content would output an ugly UI/UX due to the size of the content inside each column, you would need to override the styles to get it in line. +1 for the correct response. – Zac Grierson Jul 16 '15 at 14:31
Thanks now I got nested columns. Since Zacharia's answer helped me with couple of more problems in this same question, I marked his answer correct (wish user had options to choose 2 answers). – AabinGunz Jul 17 '15 at 06:38
No problems, Zacharia's solution was good, I'am just happy I could help. – tagette Jul 17 '15 at 11:18

score 2 · Accepted Answer · edited May 23 '17 at 11:58

Right so my attempts at solving this are below, I'm not going to give you the same body of text because you can review that in the previous post.

Here is the completed grid with all the parts you have requested, it's also laid out better. (Its not really device friendly as requested).

I updated the example to work correctly

Code:

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainController">
  <div class="container-fluid">
    <div class="row">
      <div class="hidden-xs col-sm-2 sidebar">
        <div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
            <div class="navbar navbar-custom" role="navigation">
              <ul class="nav recommendation-nav">
                <li class="active">
                  <a href="#/"><img style="padding-right: 5px" /> Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px"  />Side bar 1</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar 2</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px"/>Side bar 3</a>
                </li>
              </ul>
            </div>
          </div>
      </div>
      <div class="col-xs-12 col-sm-8 col-sm-offset-1 report-area">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="row">
              <div class="col-xs-12 col-sm-2">
                <div class="dropdown" ng-show="!loadinga">
                  <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
                    {{dropDownTitle}}
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                    <li ng-repeat="agent in agentListData">
                      <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-xs-12 col-sm-2">
                <div class="dropdown " ng-show="!loadinga">
                  <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
                    {{dropDownAllTaskStatusTitle}}
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
                    <li ng-repeat="task in taskStatusListData">
                      <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-xs-12 col-sm-2">
                <div ng-show="!loadinga">
                  <input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
                  ng-blur="" />
                </div>
              </div>
              <div class="col-xs-12 col-sm-4 divGridText" ng-show="!loadinga">
                <input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
                <label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running &lt; </label>
                <input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
              </div>
              <div class="col-xs-12 col-sm-1 divGridText" style="width:9.33%" ng-show="!loadinga" >
                <input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
                <label for="datalabels" style="font-weight:normal;">Task Labels</label>
              </div>
              <div class="col-xs-1 col-sm-1 divGridImage" ng-show="!loadinga">
                <button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Preview: Preview of the image

Thanks **your** solution and **tagette**'s solution helped me. — AabinGunz, Jul 17 '15 at 06:36

score 0 · Answer 4 · answered Jul 16 '15 at 12:55

0

Easy but no very attractive solution

<span>minutes</span>

PS: I am not sure I have fully understood your question

answered Jul 16 '15 at 12:55

QGA

3,114
7
39
62

I need to have all the 7 elements on 1 line evenly distributed as much as possible. I also added an expected screenshot of how the end result should look like. – AabinGunz Jul 16 '15 at 13:02

Need help in aligning items together in Bootstrap grid layout

4 Answers4

Bad example:

Good example:

Linked