How to create a custom horizontal button groups in Bootstrap 3?

Question

I am new in Bootstrap 3. I want to create a div like this-

So, there is 5 elements in the button group.

When one element is selected, it will be looking like this-

What I have created is -

And the code is-

<!-- Weather -->
                    <div class="element page-header">
                        <div class="header_text">
                            Weather
                        </div>
                        <div class="description_text">
                            <div class="row">

                                <!-- Sunny -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/sunnylogo.png" alt="Sunny logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Sunny
                                    </div>
                                </div>
                                <!-- End Sunny -->

                                <!-- Walking -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/walkinglogo.png" alt="Walking logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Walking
                                    </div>
                                </div>
                                <!-- End Walking -->

                                <!-- Windy -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/windylogo.png" alt="Windy logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Windy
                                    </div>
                                </div>
                                <!-- End Windy -->

                                <!-- Rain -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/rainlogo.png" alt="Rain logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Rain
                                    </div>
                                </div>
                                <!-- End Rain -->

                                <!-- Snow -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/snowlogo.png" alt="Snow logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Snow
                                    </div>
                                </div>
                                <!-- Snow -->
                            </div>
                        </div>
                    </div>
            <!-- End Weather -->

So, I have used page-header class in the div and find a under line.

But I want it to be like the picture so that some margin in left and right-

And, how when it is selected, how can I handle it to show the selector-

.

Can anyone please help me?

Thanks in advance for helping.

Answer 1

After use another div with the class 'container-fluid' then in your css

.container-fluid
{
   border-bottom: 1px solid #333;
} 

.col-xs-2:hover, .col-xs-2:active, .col-xs-2:focus
{
   border-bottom:2px solid #relevent color;
}

but, I suggest you to use anchor tags () and your col-xs-2 will not the divide the width by 5 so, Give them custom widths.(20%)