CODEWITHSUNDEEP
htmlbootstrap-4
Jammer
Jammer

Reputation: 51

How do I get the desired grid layout in bootstrap

I've been plugging away at this for some time and I get close to the desired output but there's always an issue with centering. It's the thumbnail charts to the right that I can seem to get aligned in a square as shown in the attached figure. I know that my understanding of div code isn't where it should be and that's where I'm sure my issues stem from. Any help would be most appreciated.enter image description here

<div class="container-fluid">
    <div class="row bg-secondary text-light">
        <div class="col-sm-12">  

  </div>  

  <div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 bg-secondary text-light">
            <div>
              <h4><b>Project Summary</b></h4>
                <p>Here is  bunch of that doesn't mean anything for the purposes of sharing this code 
                  latitude location. The adsfasdf includes analysis of asfdd, fdfdf sdsd, dfdf Index
                  and Humidity. These data are then asdfasdfasdfas fsadf asdf asdf asdfof latitude. The data was
                  drawn from other stff adsfasdfasdfasdfadsfasdfasdfasdfsdfasdf  adsfasdfdfadsfadsfsdfsdf 
                  using Python API calls to that site, then stored in CSV files and integrated into Panda Dataframes and plotted 
                  with Matplotlib.<br></p>

                 <p></p>  asfasdf asdf d d fsdf sadf d d adsf asdf sd d d asdf d df sd fadsa fsd f
                </p>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-6">
                 <br>   
                    <img src="fig1.png" alt="Bootcamp" width="500" height="500">"

                </div>

            <div class="col-sm-3 bg-secondary text-light">
              <div class="row">
                  <h5>Visualizations</h5>

            <div class="col-sm-3 bg-secondary text-light justify-content-cente">
            </div>  
                  <img src="Fig1.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236"> 
                  <img src="Fig2.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236">




                  <div class="col-sm-3 bg-secondary text-light">
                  </div>  
                        <img src="Fig3.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236"> 
                        <img src="Fig4.png" class="img-thumbnail" alt="Temp v Alt" width="195" height="236">
            </div>



            </div>
        </div>
        <!-- Add second row -->
        <br>
        <div class="col-sm-12 bg-secondary text-light">
            <div>
                <p>Text 2</p>
            </div>
        </div>
        <div class="col-sm-12 bg-secondary text-light">
            <div>

            </div>
        </div>

        <div class="col-sm-12 row justify-content-center">
            <div class="row">
                <div class="col-sm-12">


                </div>
                <div class="col-sm-1bg-secondary text-light">

                </div>
            </div>
        </div>
    </div>
</div>



</body>
</html>

Upvotes: 0

Views: 87

Answers (2)

Robert
Robert

Reputation: 50

Here is the solution in Bootstrap:

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.boxes-left,
.box-centre,
.boxes-right {
  padding-top: 10vh;
  height: 90vh;
}

.box1,
.box2 {
  width: 100%;
  height: 50%;
}

.box1 {
  background: red;
}

.box2 {
  background: green;
}

.box-middle {
  background: blue;
  width: 100%;
  height: 100%;
}

.boxes-right {
  height: 100%;
  position: relative;
}

.title {
  text-align: center;
}

.box-r {
  float: left;
  width: 48%;
  height: 200px;
  margin: 1%;
  /* margin: 5%; */
  background: orange;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="col-md-2 boxes-left">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>

      <div class="col-md-6 box-centre">
        <div class="box-middle"></div>
      </div>

      <div class="col-md-4 boxes-right">
        <div class="col-md-12 title">
          <h1>Your Text Here</h1>
        </div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
        <div class="col-md-6 box-r"></div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Robert
Robert

Reputation: 50

I would personally recommend trying this out in raw HTML and CSS before diving in the world of Bootstrap.

Although this is not the 100% ideal solution, here's a quick solution that fulfils your design.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
}

.boxes-left {
  float: left;
  padding-top: 5vh;
  height: 90vh;
  width: 20%;
}

.box1,
.box2 {
  width: 100%;
  height: 50%;
}

.box1 {
  background: red;
}

.box2 {
  background: green;
}

.box-centre {
  float: left;
  padding-top: 10vh;
  height: 80vh;
  width: 50%;
}

.box3 {
  width: 100%;
  height: 100%;
  background: blue;
}

.boxes-right {
  float: left;
  padding-top: 5vh;
  width: 30%;
  height: 90vh;
}

.boxes-right > h1 {
  text-align: center;
}

.box-r {
  position: relative;
  float: left;
  margin: 5%;
  width: 40%;
  height: 20%;
  background: orange;
}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="boxes-left">
        <div class="box1"></div>
        <div class="box2"></div>
        </div>

        <div class="box-centre">
        <div class="box3"></div>
        </div>

        <div class="boxes-right">
        <h1>Your Text Here</h1>
        <div class="box-r"></div>
        <div class="box-r"></div>
        <div class="box-r"></div>
        <div class="box-r"></div>
        </div>
    </body>
    </html>

Let me know if this is the solution you were after!

Upvotes: 0

Related Questions