CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3flexbox
user1400995
user1400995

Reputation:

Align Bootstrap panel to the Right

I want to align my right panel until the end. Do I need to add something to the CSS?

<div class="row flex">

        <div class="col-md-5">
            <div class="panel panel-default panel-no-border">
                <div class="panel-body">

                    <p>
                        <strong>Smart XXXXX Europe Limited (XXXX Branch) </strong><br />
                        Address  <br>
                        Address  <br>
                        Address  <br>
                        Address  <br>
                        [email protected]<br>
                        www.comapny.com<br>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-md-offset-2 text-right">
            <div class="panel panel-default panel-no-border">
                @*<div class="panel-heading">
                        <h4>Mr. John Ryan</h4>
                    </div>*@
                <div class="panel-body">
                    <p>
                        <strong>Mr. John Ryan</strong><br />
                        36 Praed street <br>
                        XXXX, XXXXXX<br>
                        XXXXXX<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

CSS:

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

.panel {
   display: flex;
   flex-direction:column;
   align-content:stretch; 
}

.panel-body {
   display: flex;
   flex-grow:1;
}

Upvotes: 0

Views: 7157

Answers (3)

Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

Just add justify-content: flex-end to the parent of the panel:

<div class="col-md-5 col-md-offset-2 text-right your-class">

.your-class {
  justify-content: flex-end;
}

Demo: http://www.bootply.com/dsg1qHNopH

Upvotes: 1

Rushi Jagani
Rushi Jagani

Reputation: 160

`https://jsfiddle.net/nzLsedob/`

check out here I hope this is the answer you want.

Upvotes: 1

Saif
Saif

Reputation: 2679

You must wrap divs and then add padding-right= 0px; to second div.

see working fiddle

Upvotes: 1

Related Questions