CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Antonio
Antonio

Reputation: 765

Align bootstrap button into one line

I have web layout with 3 buttons inside the layout. I want to align thats 3 button into one line horizontally but I still doesn't get the way.

This is the layout screenshoot :

enter image description here

And this is my code :

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                            <div class="col-md-12">
                                <legend style="text-transform: uppercase;">Header 1</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->register_image?>">
                                <p class="mt15"><?=$page_data->register_text?></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                            <a href="<?=site_url()?>register_modal" class="ajax">
                                <button class="btn btn-warning">REGISTER</button>
                            </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                            <div class="col-md-12">
                                <legend style="text-transform: uppercase;">Header 2</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->login_image?>">
                                <p class="mt15"><?=$page_data->login_text?></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a href="<?=site_url()?>login_modal" class="ajax">
                                    <button class="btn btn-warning">LOGIN</button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                             <div class="col-md-12">
                                 <legend style="text-transform: uppercase;">Header 3</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->find_image?>">
                                <p class="mt15"><?=$page_data->find_text?></p>
                             </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                            <a href="<?=site_url()?>search_modal" class="ajax">
                                <button class="btn btn-warning">SEARCH</button>
                            </a>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is the jsfiddle : https://jsfiddle.net/hc6xcruk/

Anyone knows how to do that ?

Upvotes: 1

Views: 674

Answers (4)

Syam Mohan M P
Syam Mohan M P

Reputation: 1067

Use style="max-height:170px; overflow:hidden;" for image container will solve the issue. 

<div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                    <div class="row" style="max-height:170px; overflow:hidden;">
                        <div class="col-md-12">
                          ....
                          <p class="mt15" style="height=70px;"><?=$page_data->register_text?></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                           ...........
                        </div>
                    </div>
</div>

Upvotes: 0

lalit bhakuni
lalit bhakuni

Reputation: 627

you can fix the height p.mt15{ height:90px;}

try this one https://jsfiddle.net/hc6xcruk/1/

Upvotes: 0

user2648008
user2648008

Reputation: 152

how about having all the buttons in one row after a content row.

<div class="row">
  <div class="col-md-4"><button></div>
  <div class="col-md-4"><button></div>
  <div class="col-md-4"><button></div>
</div>

Upvotes: 1

ADITYA BATRA
ADITYA BATRA

Reputation: 15

Just give a height to the class mt15 or better way to add class in <p> tag for that section and add height CSS to it. Height should be in reference to the section has maximum content.

<div class="row"> <div class="col-md-12"> <legend style="text-transform: uppercase;">Header 1</legend> <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->register_image?>"> <p class="mt15" style="height=70px; min-height:70px;"><?=$page_data->register_text?></p> </div> </div>

Simply I have added an inline CSS to the <p> tag. You can also add class and give CSS to it. That height must be in reference to the maximum content you have from all the div. As for example if you have 3 div and 2nd one have the more content then height should be according to the second div. Height must be equal for all the division i.e. for <p> tag

Upvotes: 0

Related Questions