Modificar examplo do Bootstrap

HTML5

19/04/2022

Pessoal, peguei como exemplo o código de um modelo bootstrap do tipo bolg e não estou conseguindo inserir minhas imagens no modelo, gostaria de saber como inserir. O código que peguei na página oficial do bootstrap é:

<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div>
</div>

<div class="row mb-2">
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

</div>
</div>
</div>
</div>

Eu gostaria de colocar imagens referentes a cada categoria de post que criei, mas quando tento não fica legal.



Gostaria que a imagem tomasse todo esse espaço em cinza em cada uma das divs. Como faço isso ?
Joao Claudio

Joao Claudio

Curtidas 0

Respostas

Nomad

Nomad

19/04/2022

Cara, dá uma olhada nesse link.. veja se tem algo que ajuda.

https://getbootstrap.com/docs/4.0/content/images/
GOSTEI 0
Joao Claudio

Joao Claudio

19/04/2022

Cara, dá uma olhada nesse link.. veja se tem algo que ajuda.

https://getbootstrap.com/docs/4.0/content/images/


Olhei, inclusive vi vários exemplos mas no meu projeto nada funcionou. Um colega me disse para fazer isso:
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark" style="background-image: url(''https://mdbcdn.b-cdn.net/img/new/slides/003.webp'');" >

fiz, mas a imagem nem aparece. Testei tambem criando um arquivo css e modificando da seguinte forma:
.jumb_background{

background-image: url(''https://br.freepik.com/fotos-vetores-gratis/porco'');
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}

Tambem nao funcionou.

A questão é: no meu código eu tive que colocar a imagem com a tag <img>, o que acredito ter feito com que o título e a descrição, que são um h3 e um h4 sejam tratados independentemente e por isso todos estão em uma sequencia e nao com o texto sobre a imagem. Agora como resolver ? Eis a questão.
GOSTEI 0
POSTAR