CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user3033194
user3033194

Reputation: 1831

Button group not positioning inside well

In my HTML page, I am using a well to place my main page contents. The code is given below:

       <div id="container">
            <div class="row">
                <div class="col-md-10"></div>
                <div class="well col-md-10 well-centered">
                    <p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
                    <hr>
                    <div class="well col-md-6 well-centered well-background" align="center">
                        <p> <span class="glyphicon glyphicon-info-sign"></span>
                            Start your work by setting a name for your Desk</p>

                    </div>
                    <br>

                    <div class="btn-group btn-align">
                        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"> Add Queue</span></button>
                        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-flag"> Set Desk Name</span></button>
                        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"> Refresh Queue List</span></button>
                    </div>  
                </div>
                <div class="col-md-10"></div>
            </div>
        </div>

My (relevant) CSS is given below:

.btn-align{
    float: right;
}

My well is appearing like this (I don't know I uploaded it the right way): http://i60.tinypic.com/mm7xjp.png. Does someone know how I could place the button group inside the well? Right now, it's partially placed outside. Thanks in advance!!

Upvotes: 1

Views: 573

Answers (2)

Krzysiek
Krzysiek

Reputation: 2495

Add clearfix class to .well

<div class="well col-md-10 well-centered clearfix">

Upvotes: 1

atinder
atinder

Reputation: 2090

add <div class="clearfix"></div> after

<div class="btn-group btn-align">
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"> Add Queue</span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-flag"> Set Desk Name</span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"> Refresh Queue List</span></button>
</div>

Upvotes: 1

Related Questions