CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
S. Thomas
S. Thomas

Reputation: 31

Achieve button on top of card in bootstrap

I'm trying to achieve a button on the top of my card, basically overlapping the card

I tried inserting a button above the card and try to adjust the margin so that it goes to the area I want it, however the margin top will push dow everything on the page

<button type="button" class="btn btn-secondary btn-lg " style="margin-left:600px; margin-top:10px">
    Large button
</button>


<div class="card-deck card-info card-width">

  <div class="card special-card">

    <h1 class="card-title text-center">COMMERCIAL</h1>
    <img class="card-img-top" src="assets/img/com.png" alt="Card image cap">
    <div class="card-body">

      <div class="row">
        <div class="col-md-6">
       <ul>[enter image description here][1]

Upvotes: 0

Views: 1847

Answers (1)

cssyphus
cssyphus

Reputation: 40038

You can try using position:absolute and z-index to position the button on top of the card.

Here's how it works.

z-index allows you to place an element on top of other elements. The default z-index is zero, so any number greater than that will be on top. However, note that Bootstrap uses z-index a lot -- so there are probably already some z-index values in use.

position:absolute takes an element out of the flow and allows you to place it on top of other elements. We generally use position:absolute together with z-index.

Important: You cannot use position:absolute unless the parent container has position:relative (or absolute or fixed). The default position value is static, and that will not work with position:absolute in a child element.

DEMO:

.outerDiv {position:relative;}
.d1{width:150px;height:80px;background:wheat;}
button{position:absolute;top:10px;left:20px;}
<!-- z-index not needed here because the button comes after the div -->
<div class="outerDiv">
    <div class="d1">Div One</div>
    <button>Button</button>
</div>

Upvotes: 1

Related Questions