CODEWITHSUNDEEP
cssbootstrap-4
trey_0329
trey_0329

Reputation: 17

How to align the text under and side of the image and put them in same row with css bootstrap 4

I want to align the 2 different texts side and under the image as 1 article.
and want to put 2 articles in same row when the window size is col-md or bigger.

enter image description here I want the second article to be displayed under the article 1 when the window size is smaller than col-sm.

enter image description here

I have tried the below code but I could not put them in same row.
How to put them in the same row?

  <div class="row">
      <div class = 'col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="col-8 col-md-4">
        <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>


  <div class="row">
      <div class = 'col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="col-8 col-md-4">
        <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"aricle 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>

Upvotes: 0

Views: 530

Answers (1)

Rishab Tyagi
Rishab Tyagi

Reputation: 926

You should use display:flex; for the row.For when screen size is less, you should consider @media queries.If you need anything else, please let me know.

@media all and (min-width:992px){
  .art{
      margin-left:80px;
  }
  }
@media all and (min-width:768px) and (max-width:991px){
  .art{
      margin-left:100px!important;
  }
}
@media all and (min-width:768px){
  .container{
      display:flex;
      flex-direction:row;
  }
  .row{
      flex-direction:row;
      
  }
}

.row{
     display:flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  <div class="container-fluid">
  <div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  </div>
  </body>
  </html>

Upvotes: 1

Related Questions