Positioning a bootstrap button inside a bootstrap div

Question

I am trying to face a styling problem with bootstrap. I am new in front-end development and I hope you can help me solving this specific problem. I am iterating with knockout over a list of employees. For each employee I create a sort of a card with 3 parts: Part with a Name and a Button, Picture, General Info. This is how it should look like:

The wite stripe in the blue area is just the name of the employee which I painted out.

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

And the css

#picturesSection{
width: 100%; overflow: hidden;
}

.cardPositioning{
float: left;
margin:20px;
}

.background-image {
background-image: url("../Images/back.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
}

.removeButton{
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
}

The problem is how to position the Button in the Card representing the "minus" icon.. I need that button to remove an employee from the database. And I would like to have the button at the top right corner of the blue space. Bootstrap has though some padding in the panel panel-primary classes, which I don't want to remove because of the position of the name of the employee (which I would like to maintain) . Would like to know how can I solve these problems if possible. Thanks in advance!

Arshmeet · Accepted Answer · 2016-11-18T10:57:09.560

use Bootstrap "pull-right" class on button and make the panel-title "inline-block"

HTML

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle panel-title-mod" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

CSS

 #picturesSection{
width: 100%; overflow: hidden;

}

.cardPositioning{
float: left;
margin:20px;
    position:relative;
}

.background-image {
background-image: url("../Images/back.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
}

.removeButton{
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
  position:absolute;
  right:0;
  top:0;
}

.panel-title-mod {
  display: inline-block;
}

See this codepen

http://codepen.io/Arshmeet/pen/oYYRLM

Okey I see! The button reached the right side.. but it's not yet on the top right corner.. probably due to the padding.. Would like to place it there if possible — Tarta, Nov 18 '16 at 10:43
Both your solution and @Mark one's worked properly! Chose yours just due to extensiveness in the answer! But it solved my problem! Thanks :) — Tarta, Nov 18 '16 at 12:00

score 1 · Answer 2 · answered Nov 18 '16 at 10:38

1

There are multiple ways to do it --

1- use pull-right class on button. It distorts the wrapper div. So increase the height of .panel-heading to 40px;

2- use position: relative and left : 90% on remove-button class for desired result

https://jsfiddle.net/1t13t988/

answered Nov 18 '16 at 10:38

RahulB

2,070
1
18
26

It indeed distorts the wrapper! Increasing the height solved the problem. Now the button is on the right, but I horizontally centered. I would like to move it towards the top right corner but I think that the padding of the card panel avoids doing it. How can I achieve it? – Tarta Nov 18 '16 at 10:46
@Tarta : Use my-panel-heading class and remove padding. Eg - https://jsfiddle.net/1t13t988/1/ – RahulB Nov 18 '16 at 10:56

score 1 · Answer 3 · answered Nov 18 '16 at 10:43

1

You could try absolute position:

    #picturesSection .panel-heading {
        position: relative;
    }

    .removeButton{
        position: absolute;
        top: 0;
        right: 0;
    }

here's a code pen

answered Nov 18 '16 at 10:43

Mark

209
1
4

score 0 · Answer 4 · answered Nov 18 '16 at 10:29

0

Have you tried adding the class "pull-right" to the button?

answered Nov 18 '16 at 10:29

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Nov 18 '16 at 10:37
@gkb will make note for future reference. Thanks for the advice! – Nov 18 '16 at 10:57

score 0 · Answer 5 · edited May 23 '17 at 10:32

I would recommend trying the answers given in this other question: How can I get my Twitter Bootstrap buttons to right align?

This should work, but I haven't tested it:

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

If that fails, you could always make a custom CSS rule to float your button to the right:

.cardPositioning > .panel-heading > button {
    float: right;
}

This was creating distortion in the wrapper div unfortunately — Tarta, Nov 18 '16 at 11:56

Positioning a bootstrap button inside a bootstrap div

5 Answers5