CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap-3
Rodolfo Luna
Rodolfo Luna

Reputation: 957

Bootstrap 3 Textarea with input-group-button and btn-group-vertical

I'm using bootstrap 3, I have a form with a textarea and two buttons. What I want is group the buttons with btn-group-vertical and textarea with the buttons with input-group-button.

My code is it:

<form>
    <div class="input-group">
        <textarea class="form-control" rows="2" style="resize:none"></textarea>
        <span type="submit" class="input-group-addon btn btn-primary">Button 1</span>
        <span type="submit" class="input-group-addon btn btn-primary">Button 2</span>
    </div>
</form>

enter image description here

This option the buttons stays so big.

Second option:

<form>
    <div class="input-group">
        <textarea class="form-control" rows="2" style="resize:none"></textarea>
        <span class="input-group-addon">
            <span class="btn-group-vertical">
                <span type="submit" class="btn btn-primary">Button 1</span>
                <span type="submit" class="btn btn-danger">Button 2</span>
            </span>
        </span>
    </div>
</form>

enter image description here

I would like something like the second option but without the grey box and this margin.

Could someone help me?

Upvotes: 1

Views: 1478

Answers (1)

sara moghanam
sara moghanam

Reputation: 125

In your css file Write

.input-group-addon{
  padding: 0;
}

and that will remove the padding around the buttons.

Upvotes: 0

Related Questions