how to make a big image to be not drawn to height we want in bootstarp4

Question

i want to make a big image like a cards in bootstrap (Image overlays) but image is too big and the height i want ..this is i have done :

html :

<section class="card bg-dark no-border">
        <div class="flex-column justify-content-center align-items-center bg-danger text-dark">
            <img class="card-img img-fluid" src="img/bg_1.jpg" alt="Card image">
            <div class="card-img-overlay text-center m-auto">
                <h5 class="card-title mt-3">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
                <p class="card-text">Last updated 3 mins ago</p>
            </div>
        </div>
    </section>

and does any one know a better way to make texts center with flex ?? .. im useing margin for this but it would be nicer way to do this flex box ...

score 0 · Answer 1 · answered Jan 25 '20 at 08:18

0

I thing you just a picture with a bad resolution

answered Jan 25 '20 at 08:18

Inlife and you too.

36
6

1

nope .. the image itself is good .. my problem is the height using css and bootstrap and in full width of viewport displays like this. – Faraz salehi Jan 25 '20 at 09:03

score 0 · Answer 2 · answered Jan 25 '20 at 15:11

Please prefer flexbox documentation first but for your problem, I give you a solution.

Just add d-flex flex-column justify-content-center align-items-center on your text block and for showing text purpose I highlight it with text-danger

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<section class="card bg-dark no-border">
    <div class="bg-danger text-dark">
        <img class="card-img img-fluid" src="https://images.wallpaperscraft.com/image/bird_silhouette_vector_134154_1920x1080.jpg" alt="Card image">
        <div class="card-img-overlay text-center m-auto d-flex flex-column justify-content-center align-items-center text-danger">
            <h5 class="card-title mt-3">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
            <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>
</section>

Thank for your time .. but my problem is how to make this big img responsive with a height we want .. which is smaller than images height .. like 200px in other words `` .. how to solve this ? — Faraz salehi, Jan 26 '20 at 07:41

score 0 · Accepted Answer · answered Feb 02 '20 at 06:11

i did this for a big image to show in web page ,I write my own class to make this happen :

CSS :

<style>
.proposal{
    background-image: url("http://lorempixel.com/1020/200/nature/");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    min-height: 200px;
}
</style>

HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<section class="container-fluid proposal justify-content-center align-items-center d-flex">
    <div class="row flex-row  justify-content-center align-items-center">
        <div class="col-12 col-sm-5">
            <p class="text-center text-sm-left">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis cupiditate deleniti dignissimos dolorem doloremque, illo laborum, libero, nesciunt odit qui sit veritatis? Atque illum iusto maxime, nulla optio saepe?
            </p>
        </div>
        <div class="col-12 col-sm-5 text-center">
            <a href="#" class="btn btn-warning" id="visit_time">btn</a>
        </div>
    </div>
</section>

how to make a big image to be not drawn to height we want in bootstarp4

3 Answers3