News page | Picture and texo next door

Question

Good afternoon

I’m building a news page but I’m having a problem with not being able to add text next to the image and I’m not getting why.

---

I am using bootstrap 4 and I already have the page like this:

---

My code

    <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: I’ve tried several things but the text either stays down or stays down one line

Answer 1

You could wrap with a div the image and the text (a div for each) and add the following CSS:

div {
  display: flex;
}

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

Soon it will be like this:

Answer 2

Dude there are several ways to fix this using Bootstrap, but in fact the way you set up your grid is very confusing. I cleaned up the code, take a few rows and cols unnecessary etc. From a look at the grid you will understand better, note that I used the classes m-0 and mr-2 etc, these classes are to control in which screen size I want to leave margin or not, this is to adjust the spacing responsibly.

<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>