How do I get the desired grid layout in bootstrap

Question

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.

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

Robert · Accepted Answer · 2020-05-28 21:22:41Z

1

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>

answered May 28, 2020 at 21:22

Robert

501 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Robert Over a year ago

The orange boxes won't display properly when you run the snippet, but if you test the code on an actual browser, you'll get the sought after result. All you need to do is alter the CSS properties in order to alter the design to your needs. Hope this helps!

Jammer Over a year ago

this worked well...but how do I insert images into the boxes so that I end up with just charts in them.

Robert Over a year ago

Just add <img src="PATH TO IMAGE" class="col-md-12" /> in the divs that you want to add the image in.

Robert Over a year ago

I would appreciate it if you'd upvote my solution and mark the question as solved. Have a nice day!

Jammer Over a year ago

Absolutely. You must be very talented. You put the solution together so quickly. Great work!!!! You'd make a very good consultant if you aren't doing that already.

|

Robert · Accepted Answer · 2020-05-28 20:55:33Z

0

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!

answered May 28, 2020 at 20:55

Robert

501 gold badge3 silver badges10 bronze badges

2 Comments

Jammer Over a year ago

I'd be more than willing to use raw HTML, except that this is for a course assignment in which we are instructed to use Bootstrap. Looking at the raw HTML I can see why you're suggesting it, it looks much simpler.

Robert Over a year ago

Sure, let me try and execute this in bootstrap!

Collectives™ on Stack Overflow

How do I get the desired grid layout in bootstrap

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related