Tarta Tarta - 20 days ago 10
CSS Question

Positioning a bootstrap button inside a bootstrap div

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:

enter image description here

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!

Answer

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