Search code examples
htmlcsstwitter-bootstraplayoutnested

How to nest grids in Bootstrap

I'm a beginner at Bootstrap and I'm attempting to create grids in Bootstrap with this layout

I wrote this:

<div class=’container-fluid’></div>
    <div class="row">
        <div class="col-sm-3 bg-primary"><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
        
        <div class='col'>
            
            <div class=’row’>
        <div class="col bg-primary">Lorem ipsum dolor.</div>
        <div class="col bg-secondary">Lorem ipsum dolor.</div>
      </div>
      
    </div>

The result I get is this layout

They should be one whole element. I feel like I'm very close. Maybe I'm messing up the rows? Thanks in advance!

Solution

  • This is my solution hope it helps.

    <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

    <div class="row">
      <div class="col-sm-3 bg-primary" style="height:200px"><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
      <div class="col">
          <div class="row bg-primary h-50">Lorem ipsum dolor.</div>
          <div class="row bg-secondary h-50">Lorem ipsum dolor.</div>
      </div>  
   </div>