Home > other >  How to nest grids in Bootstrap
How to nest grids in Bootstrap

Time:11-17

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 >
        <div ><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
        
        <div class='col'>
            
            <div class=’row’>
        <div >Lorem ipsum dolor.</div>
        <div >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!

CodePudding user response:

This is my solution hope it helps.

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

    <div >
      <div  style="height:200px"><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
      <div >
          <div >Lorem ipsum dolor.</div>
          <div >Lorem ipsum dolor.</div>
      </div>  
   </div>

  • Related