CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Wild Goat
Wild Goat

Reputation: 3579

Bootstrap grid border issue

I've following grid system showing flight information (10 columns) and select button & price (2 columns). I am trying to make a border which would separate select button section from rest of flight information, but when I apply border CSS rule, it draws line only half of the way. I suspect that might be a problem of my row/column structure. How do I resolve current issue?

Thanks for any help!

Outcome:

enter image description here

CSS:

.selectButtonColumn{
    border-left: 1px solid;
}

HTML:

    <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="clearfix returnFlyRow">
                            <hr>

                            <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: 0

Views: 599

Answers (1)

Stephanie Kendall
Stephanie Kendall

Reputation: 176

I would probably put every 12 columns worth of content in separate row, BUT, I don't think you need to do that to achieve what you are after. Try putting a right border on your "returnFlyRow" class.

.returnFlyRow{
    border-right: 1px solid;
}

Upvotes: 2

Related Questions