CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcakephp
jeeeee
jeeeee

Reputation: 229

CakePhp-Bootstrap submit button wont align with textbox

I can't really make my button align to my textboxes. pls see code and images for a clearer understanding. Is there anything wrong with my classes and stuff?

enter image description here This is my CTP/HTML

<div class="row">
<div class="col-xs-2">
<ul class="nav nav-sidebar">
    <h3><?= 'Actions' ?></h3>
    <li><?= $this->Html->link('New Bookmark', ['action' => 'add']) ?></li>
    <li><?= $this->Html->link('New User', ['controller' => 'Users', 'action' => 'add']) ?></li>
    <li><?= $this->Html->link('New Tag', ['controller' => 'Tags', 'action' => 'add']) ?></li>
</ul>
</div>
<div class="col-xs-9" style="box-shadow: -8px 0px 6px -6px #3C5791;">
<?= $this->Form->create($bookmark) ?>
<legend><?= 'Add Bookmark' ?></legend>
<div class='form-horizontal'>
    <div class="form-group">
        <?= $this->Form->input('user_id', ['options' => $users, 'class'=>'form-control', 'style'=>'width:30%',
                                           'label'=>['class'=>'col-xs-2 control-label']]); ?>
    </div>
    <div class="form-group">
        <?= $this->Form->input('title', ['class'=>'form-control','style'=>'width:50%',
                                         'label'=>['class'=>'col-xs-2 control-label']]); ?>
    </div>
    <div class="form-group">
    <?= $this->Form->input('description', ['class'=>'form-control','style'=>'width:50%',
                                           'label'=>['class'=>'col-xs-2 control-label']]); ?>
    </div>
    <div class="form-group">
    <?= $this->Form->input('url', ['class'=>'form-control','style'=>'width:50%',
                                   'label'=>['class'=>'col-xs-2 control-label']]); ?>
    </div>
    <div class="form-group">
    <?= $this->Form->input('tags._ids', ['options' => $tags, 'class'=>'form-control','style'=>'width:50%',
                                         'label'=>['class'=>'col-xs-2 control-label']]); ?>
    </div>

    <div class="col-xs-3 col-xs-offset-2">
        <?= $this->Form->button('Submit',['class'=>'btn btn-default']) ?>
        </div>
        <?= $this->Form->end() ?>
        </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 426

Answers (2)

sanjay verma
sanjay verma

Reputation: 257

Try This :

<div class="form-group">
   <label class="col-xs-2 control-label"></label>
   <?= $this->Form->button('Submit',['class'=>'btn btn-default']) ?>
</div>

Upvotes: 1

yeiniel
yeiniel

Reputation: 2456

You are using different CSS classes for the div containing the button and for the other elements. Try to use the same CSS class "from-group" for the button div.

Upvotes: 2

Related Questions