Bootstrap Grid System issues

bootstrap

#1

Hey Guys,

I am creating a section of my website to include a Bootstrap grid but I want it like 6 2 2 2 then another set of 2's underneath with the 6 going to the bottom of the second sets of 2 (hope that made sense)

I created this in the Tryit Editor and it worked the way I wanted it to but when I dragged the code into my HTML file it appears like this

instead of this

does anybody know what the problem is here is my code (it has inline styling but i will change it after)

<div class="container-fluid" style="margin-top: 10%;">
                <div class="row">
                  <div class="col-sm-6" style="background-color:lightyellow; padding:100px;">
                    <hr style="border-color:gold;">
                    <h1>Customer<BR>Services</h1>
                    <h4>LEARN MORE</h4>
                  </div>
                  <div class="col-sm-2" style="background-color:#EB5C57; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color:#C83839;"></i>
                    <hr style="border-color: #C83839">
                    <a style="font-size:31px; color:#C83839;">Graphic<BR>Design</a>
                  </div>
                  <div class="col-sm-2" style="background-color:#4581C3; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color:#9DCAEE;"></i>
                    <hr style="border-color: #9DCAEE">
                    <a style="font-size:31px; color:#9DCAEE;">Graphic<BR>Design</a>
                  </div>
                  <div class="col-sm-2" style="background-color:#5A539F; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color:#B0A0CE;"></i>
                    <hr style="border-color: #B0A0CE">
                    <a style="font-size:31px; color:#B0A0CE;">Graphic<BR>Design</a>
                  </div>
                  
                  <div class="col-sm-2" style="background-color:#F8DB74; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color:#D7AA45"></i>
                    <hr style="border-color: #D7AA45">
                    <a style="font-size:31px; color:#D7AA45;">Graphic<BR>Design</a>
                  </div>
                  <div class="col-sm-2" style="background-color:#292C30; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color:#C1996B;"></i>
                    <hr style="border-color:#C1996B">
                    <a style="font-size:31px; color:#C1996B;">Graphic<BR>Design</a>
                  </div>
                  <div class="col-sm-2" style="background-color:#3F9687; padding: 100px;">
                    <i class="fa fa-pen-nib fa-2x" style="color: #2DF7D5;"></i>
                    <hr style="border-color:#2DF7D5;">
                    <a style="font-size:31px; color:#2DF7D5;">Graphic<BR>Design</a>
                  </div>
                </div>
              </div>

Thanks!


#2

I don't really do Bootstrap, but I think how you would structure this is one row of two columns, the first being the "Customer Services" box, the second being a nested three columns of two rows.


#3

To have something like this https://imgur.com/1TwoxW9

I would code something like below

<div class="row">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-4">...</div>
      <div class="col-sm-4">...</div>
      <div class="col-sm-4">...</div>
      <div class="col-sm-4">...</div>
      <div class="col-sm-4">...</div>
      <div class="col-sm-4">...</div>
    </div>
  </div>
</row>

#4

Hey, Thanks for sharing this with me it seems to have worked my only question now is i want to add a image background to the first col-sm-6 but i tried background: url(file location) but it is not showing!

Thank You


#5

show me your CSS code please