Bootstrap3 horizontal forms with rows or inline forms

Question

I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this

First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.

I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.

I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT

As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?

How can I accomplish this?

Answer 1

To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.

I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.

I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.

<div style="text-align:left;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <h4>Owner</h4>
            </div>
            <div class="col-md-8">
                <h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
            </div>
        </div>
        <form class="form-inline">
            <div class="row">
                <div class="col-md-4">
                    <h4>Scheduled for</h4>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-1">
                            <h4>Begin:</h4>
                        </div>
                        <div class="col-md-11">
                            <div class="form-group">
                                <input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="beginTime" placeholder="10:30">
                            </div>
                            (Duration: <div class="form-group">
                                <input type="text" class="form-control" id="beginTime" placeholder="30">
                            </div> min)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1">
                            <h4>End:</h4>
                        </div>
                        <div class="col-md-11">
                            <div class="form-group">
                                <input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="endTime" placeholder="11:30">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <h4>Location</h4>
                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <input type="text" class="form-control" id="location">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/