Bonjour a tous,

Je m’exerce actuellement à créer un site web statique (sans php donc) avec bootstrap. Je voudrai avoir ce type de card personnalisée :

Voici mon code Html :

<div class="hot-offer">
<h4 class="yellow-text text-center"></i> Titre Card</h4>
<div class="align-content-end">
<div><span>Text description etc...</span>
<div class="row">
<div class="col-3">280 euro</div>
<div class="col-6"></div>
<div class="col-3"><button class="book-button"><a href="#"><i class="far fa-bookmark"></i>BOOK NOW</a></button></div>
</div>
</div>
</div>

et mon CSS:

.hot-offer{
	width: 300px;
	height: 300px;
	background-image:url(../img/hot-offers-1.jpg);
	background-position: center;
}
.book-button{
	position: relative;
	height: 20px;
	width: 80px;
	font-size: 9px;
	background-color: gold;
}

Merci d'avance pour votre aide.

Bonjour,

Tu as une documentation BootStrap qui explique assez bien la création de Cards:

https://getbootstrap.com/docs/4.1/components/card/

Bonjour,

Voici une solution comme une autre :

<div class="container">
    <div class="card">
        <div class="row">
            <div class="col-md-4">
                <div class="card-body">
                    <img id="image" src="http://www.111ideas.com/wp-content/uploads/2018/04/creative-sad-image-download-for-mobile-300x300.jpg">
                        <div id="over-image">
                            <h4>
                                writing over image
                            </h4>
                            <button class="btn">
                                Ask for quote
                            </button>
                        </div>
                    </img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-body">
                    <img id="image" src="http://www.111ideas.com/wp-content/uploads/2018/04/creative-sad-image-download-for-mobile-300x300.jpg">
                        <div id="over-image">
                            <h4>
                                writing over image
                            </h4>
                            <button class="btn">
                                Ask for quote
                            </button>
                        </div>
                    </img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-body">
                    <img id="image" src="http://www.111ideas.com/wp-content/uploads/2018/04/creative-sad-image-download-for-mobile-300x300.jpg">
                        <div id="over-image">
                            <h4>
                                writing over image
                            </h4>
                            <button class="btn">
                                Ask for quote
                            </button>
                        </div>
                    </img>
                </div>
            </div>
        </div>
    </div>
</div>

Et le css

.card-body {
  position: relative;
  text-align: center;
  color: black;
}
#over-image {
  position: absolute;
  width: 85%;
  background-color: black;
  color: white;
  opacity:0.5;
  padding: 10px;
  bottom: 30px;
  left: 25px; 
}

et voici le resultat : https://codepen.io/ninokiri/pen/yRzMBZ