1

Boa tarde

Estou a construir uma pagina de noticias mas estou com o problema de não conseguir adicionar texto ao lado da imagem e não estou a conseguir o porquê.


Estou a utilizar bootstrap 4 e neste momento já tenho a página assim:

inserir a descrição da imagem aqui


O meu código

    <div class="container">
            <div class="newspage h-10">
        <div class="row">
        <div class="col-md-8 col-lg-6">
            <div class="card card-inverse card-primary">
                <img src="img/slidernews.png" class="img-fluid" alt="Responsive image">
            </div>
            <h7 style="margin-top: 1rem; float: left"> NEWS </h7>
            <h7 style="margin-top: 1rem; float: right"> 04/08/2019 </h7>
              <hr class="style14">

            <p style="margin-top: 2rem;">Msdossary é o atual campeão mundial de Fifa, tendo vencido a eWorld Cup de 2018 em grande estilo. Depois de mais um ano de performances impressionantes e algumas vitórias em torneios, ele está de volta à Copa do Mundo querendo para defender sua coroa, e em qualquer outro ano ele seria considerado o favorito absoluto.

O atual campeão - que venceu a FUT Champions Cup em dezembro e abril após a eWorld Cup - certamente deve manter seu título, mas não este ano: há um novo garoto em cena.</p>
        </div>
        <div class="col-md-4 col-lg-6">
            <div class="row h-100">
                <div class="col-md-6">
                    <div class="row h-100">
                        <div class="col-md-10 pb-2">
                            <div class="card bg-success h-50">
                                <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                        <div class="col-md-10 pb-2">
                            <div class="card bg-success h-50">
                                <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                        <div class="col-md-10 pb-2">
                            <div class="card bg-success h-50">
                                <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ps: já tentei varias coisas mas o texto ou fica em baixo ou fica so numa linha para baixo

0

2 Respostas 2

0

Cara existem várias formas de arrumar isso usando Bootstrap, mas na real é que a forma como vc montou seu grid está muito confusa. Eu dei uma limpada no sei código, tire algumas rows e cols desnecessárias etc. De uma olhada no grid que vc vai entender melhor, repare tb que eu usei as classes m-0 e mr-2 etc, essas classes são para controlar em quais tamanho de tela eu quero deixar margem ou não, isso é para ajustar os espaçamentos de forma responsiva.

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />


    <div class="container">
        <div class="newspage h-10">
            <div class="row">
                <div class="col-md-8 col-lg-6">
                    <div class="card card-inverse card-primary">
                        <img src="img/slidernews.png" class="img-fluid" alt="Responsive image">
                    </div>
                    <h7 style="margin-top: 1rem; float: left"> NEWS </h7>
                    <h7 style="margin-top: 1rem; float: right"> 04/08/2019 </h7>
                    <hr class="style14">

                    <p style="margin-top: 2rem;">Msdossary é o atual campeão mundial de Fifa, tendo vencido a eWorld Cup de 2018 em grande estilo. Depois de mais um ano de performances impressionantes e algumas vitórias em torneios, ele está de volta à Copa do Mundo querendo para defender sua coroa, e em qualquer outro ano ele seria considerado o favorito absoluto.

                        O atual campeão - que venceu a FUT Champions Cup em dezembro e abril após a eWorld Cup - certamente deve manter seu título, mas não este ano: há um novo garoto em cena.</p>
                </div>
                <div class="col-md-4 col-lg-6">
                    <div class="row h-100 m-0">
                        <div class="col-md-12 pb-2">
                            <div class="row h-100">
                              <div class="card bg-success col-md-4 mr-0 mr-md-2">
                                  <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                              </div>
                              <p>meu texto aqui</p>
                            </div>
                        </div>
                        <div class="col-md-12 pb-2">
                            <div class="row h-100">
                              <div class="card bg-success col-md-4 mr-0 mr-md-2">
                                  <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                              </div>
                              <p>meu texto aqui</p>
                            </div>
                        </div>
                        <div class="col-md-12 pb-2">
                            <div class="row h-100">
                              <div class="card bg-success col-md-4 mr-0 mr-md-2">
                                  <img src="noticias/minis/newstel.png" class="img-fluid" alt="Responsive image">
                              </div>
                              <p>meu texto aqui</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

2
  • OBRIGADO !! FUNCIONOU CERTINHO! VC É UM ANJO <3
    – user157478
    4/08/2019 às 19:18
  • @CursoArruda que bom que deu certo ai! Obrigado :)
    – hugocsl
    4/08/2019 às 20:32
0

Você poderia envolver com uma div a imagem e o texto (uma div para cada) e adicionar o seguinte CSS:

div {
  display: flex;
}

img {
  width: 450px; //O TAMANHO QUE VOCÊ QUISER
  height: 200px;
  margin: 0;
}

Logo, ficará assim:

uma imagem ao lado do texto

3
  • Essa propriedade irá funcionar :D mas como ele está utilizando Bootstrap não seria melhor fornecer uma resposta utilizando as classes existentes no framework? 4/08/2019 às 14:28
  • Tem razão, não tinha me ligado nisso. 4/08/2019 às 14:49
  • obrigado pela sugestao cara!
    – user157478
    4/08/2019 às 19:18

Você deve fazer log-in para responder a esta pergunta.