CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jay
Jay

Reputation: 9509

Bootstrap - Alignment issue

I am trying to align around 5 html components in one single line using bootstrap.

But could not and looks ugly like this, breaking to second line instead of being in one line.

enter image description here

HTML

<div class="form-group">
    <p class="col-md-2 badge col-md-offset-1">Column 1</p>
    <p class="col-md-1 badge">Column 2</p>
    <p class="col-md-1 badge">Column 3</p>
    <p class="col-md-2 badge">Column 4</p>
    <p class="col-md-2 badge">Column 5</p>
</div>

<div class="form-group" ng-repeat="data in allData">
    <label class="control-label col-md-3">{{data.label}}</label>
    <div class="input-group col-md-4">
        <input id="reportTypeId" type="text" class="form-control" ng-model="data.reportTypeId" style="display: none">                       
        <datepicker date-format="yyyy-MM-dd"> 
             <input id="startDate" type="text" class="form-control" ng-model="data.startDate">
        </datepicker>
        <p class="input-group-addon glyphicon glyphicon-calendar"></p>

        <datepicker date-format="yyyy-MM-dd"> 
            <input id="endDate" type="text" class="form-control" ng-model="data.endDate"> 
        </datepicker>
        <p class="input-group-addon glyphicon glyphicon-calendar"></p>

        <select class="form-control" ng-model="data.countryId" required="required">
            <option value="">Please select</option>
            <option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
        </select>

        <select class="form-control" ng-model="data.cityCode" required="required">
            <option value="">Please select</option>
            <option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
        </select>

    </div>
</div>

Updated:-

JSFiddle : http://jsfiddle.net/jjayaraman/5dbkf1xw/

Upvotes: 1

Views: 112

Answers (1)

ganders
ganders

Reputation: 7451

Hope this is what you are looking for. Took me awhile to figure it out, but I believe it's because you are wanting to hide that first text box, but you were specifying a col-md-1, which made the spacing look out of whack. Remove the col-md-1 and I think it's what you're looking for.

I also added some rows, and the container to get some better spacing.

Note: I was toying with the background-color properties to SEE where stuff was on the page.

<div class="container">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2 badge col-md-offset-1">Column 1</div>
            <div class="col-md-2 badge">Column 2</div>
            <div class="col-md-2 badge">Column 3</div>
            <div class="col-md-2 badge">Column 4</div>
            <div class="col-md-2 badge">Column 5</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1" style="background-color: yellow;">
            <input id="reportTypeId" type="text" class="form-control" style="display: none">
        </div>
        <div class="col-md-2" style="background-color: red;">
            <label class="control-label">Label</label>
        </div>
        <div class="col-md-2 input-group" style="background-color: green; padding-left: 5px; padding-right: 5px; float: left;">
            <input id="startDate" type="text" class="form-control" ng-model="data.startDate">
            <p class="input-group-addon glyphicon glyphicon-calendar"></p>
        </div>
        <div class="col-md-2 input-group" style="background-color: blue; padding-left: 5px; padding-right: 5px; float: left;">
            <input id="endDate" type="text" class="form-control" ng-model="data.endDate">
            <p class="input-group-addon glyphicon glyphicon-calendar"></p>
        </div>
        <div class="col-md-2">
            <select class="form-control" ng-model="data.countryId" required="required">
                <option value="">Please select</option>
                <option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
            </select>
        </div>
        <div class="col-md-2">
            <select class="form-control" ng-model="data.cityCode" required="required">
                <option value="">Please select</option>
                <option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
            </select>
        </div>
    </div>
</div>

http://jsfiddle.net/0yd6c7yt/

Upvotes: 1

Related Questions