Bootstrap Grid System issues

joey13 · July 12, 2018, 10:31am

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!

SamA74 · July 12, 2018, 11:11am

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.

info2310 · July 12, 2018, 2:25pm

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>

joey13 · July 13, 2018, 7:51am

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

info2310 · July 13, 2018, 11:43am

show me your CSS code please

joey13 · August 5, 2018, 8:26pm

Hey @info2310 , when using this and making it responsive the right side sections go underneath in one row is there a quick way to make this in 2 rows?

ronpat · August 6, 2018, 12:28am

Please post a “working page” that demonstrated the issue or a URL to your test site.

I recommend that you pick another service to host your images… one that does not require the user to open links to advertising and data-miners.

donboe · August 10, 2018, 7:14am

Maybe something like this:

css

.col-left {
	background-image: url(../images/your-image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

html

<div class="row">
  <div class="col-sm-6 col-left">...</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>
</div>

joey13 · August 10, 2018, 8:26am

Hi Thanks for this, But I am going to have to look at it another way as I am coming off Bootstrap and just focusing on HTML and CSS

donboe · August 10, 2018, 1:19pm

Do you mean you’re not using Bootstrap any longer? Because the CSS I gave you Is not just for Bootstrap

donboe · August 10, 2018, 2:16pm

@joey13 This is an example without using Bootstrap:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<style>
html {;
	box-sizing:border-box;	
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
	margin: 0;
	padding: 100px 0 0;	
}

.container {
	width: 65%;
	display: flex;
	flex-direction: row;
	margin-right: auto;
	margin-left: auto;		
}

.left {
	width: 50%;
	flex: 1;
	background-image: url(images/your-image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;	
}

.right {
	width: 50%;
	display: flex;
   	align-items: center;
   	justify-content: center;
	flex-direction: row;
   	flex-wrap: wrap;
	flex-flow: row wrap;	
}

.col {
	width: 33.33333333333333%;
}

.col:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

.green {
	background-color: green;	
}

.blue {
	background-color: blue;	
}
.yellow {
	background-color: yellow;	
}

</style>
</head>

<body>
<div class="container">
	<div class="left"></div>
	<div class="right">
    	<div class="col green"></div>
    	<div class="col blue"></div>  
    	<div class="col yellow"></div> 
    	<div class="col blue"></div>  
    	<div class="col yellow"></div>
        <div class="col green"></div>     
    </div>	
</div>
</body>
</html>

logiclab90 · August 10, 2018, 6:02pm

You can use full container class like container-fluid and get full width then use row and col-md-12 witch is 3 * 9 collumn

donboe · August 10, 2018, 6:15pm

@logiclab90.

I think that, @joey13 doesn’t want to use Bootstrap any longer

or maybe I missunderstood him

joey13 · August 13, 2018, 8:52am

@donboe that is correct!

system · November 15, 2018, 6:28pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.