CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Wild Goat
Wild Goat

Reputation: 3579

HTML bootstrap separation line between divs

I am practicing with bootstrap and HTML. Please take a look at the picture where I've managed to build and display a return flight. Next thing that I would like to do in order to make it look nicer and more structured: introduce a separation line between flights (separate outgoing from return).

My problem is that I am not sure what to use in order to achieve such design feature in HTML using bootstrap. Should I introduce another row between flights and inject an image or just try to accomplish it by using borders?

Thanks for any help!

enter image description here

<div class="container well well-md searchResult">

    <ul class="list-group">
        <li class="list-group-item">
            <div class="row">
                <div class="col-md-10">
                    <div class="departFlyRow">
                        <div class="col-md-2 col-md-offset-2">
                            <div><b>06:20</b></div>
                            <div>LHR</div>
                        </div>

                        <div class="col-md-2">
                            <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                        </div>

                        <div class="col-md-2">
                            <div>5h 30</div>
                            <div>direct</div>
                        </div>

                        <div class="col-md-2">
                            <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                        </div>

                        <div class="col-md-2">
                            <div><b>12:50</b></div>
                            <div>SVO</div>
                        </div>
                    </div>

                    <div class="returnFlyRow">
                        <div class="col-md-2 col-md-offset-2">
                            <div><b>06:20</b></div>
                            <div>SVO</div>
                        </div>

                        <div class="col-md-2">
                            <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                        </div>

                        <div class="col-md-2">
                            <div>5h 30</div>
                            <div>direct</div>
                        </div>

                        <div class="col-md-2">
                            <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                        </div>

                        <div class="col-md-2">
                            <div><b>12:50</b></div>
                            <div>LHR</div>
                        </div>
                    </div>

                </div>

                <div class="col-md-2 selectButtonColumn">
                    <div><b>&pound;100</b></div>
                    <button type="button" class="btn btn-success">Select</button>
                </div>
            </div>
        </li>
    </ul>

</div>

Upvotes: 2

Views: 3730

Answers (2)

bbh
bbh

Reputation: 509

You can try one of the following: 1.For the start flight, start the row with an icon of an airplane taking off, for the return flight, start the row with an icon of airplane descending. 2. Arrange start and return in columns. 3. Add a border between flights.

HTH.

Upvotes: 0

James McDonnell
James McDonnell

Reputation: 3710

Add a <hr> between your returnFlyRow div's.

Also add the clearfix class to the returnFlyRow divs.

http://jsfiddle.net/m9nn9tvj/1/

I changed your col-md-2 to col-xs-2 to work better in jsfiddle.

Upvotes: 1

Related Questions