Item: Understanding Bootstrap Columns, Rows and Containers
Rating: 3.4
Author: -Infamous

1 Downloads
101 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Understanding Bootstrap Columns, Rows and Containers</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <div class="container-fluid content-wrapper">
  
  <div class="row">
    <div class="col-xs-12 landing-information">
      <div class="col-xs-8 text-wrap">
        <h1>Understanding the Bootstrap Grid<h1>
        <h2>working with containers, rows and columns<h2>
            <h3>bootstrap responsive breakpoints:<h3>
            <p>col-xs-# reffers to extra small devices (portrait phones, less than 576px)<br>
            col-sm-# reffers to small devices (landscape phones, 576px and up)<br>
            col-md-# reffers to  medium devices (tablets, 768px and up)<br>
            col-lg-# reffers to large devices (desktops, 992px and up)<br>
            col-lg-# reffers to extra large devices (large desktops, 1200px and up)
      </div>
    </div>
  </div>

  <div class="row 1and1to12">
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
    <div class="col-xs-1 individual"><span>one Column of 1.</span></div>
  </div>


  <div class="row 1and11">
    <div class="col-xs-1 left"><span>one Column of 1.</span></div>
    <div class="col-xs-11 right"><span>one Column of 11.</span></div>
  </div>

  <div class="row 2and10">
    <div class="col-xs-2 left"><span>one column of 2.</span></div>
    <div class="col-xs-10 right"><span>one column of 10.</span></div>
  </div>

  <div class="row 3and9">
    <div class="col-xs-3 left"><span>one column of 3.</span></div>
    <div class="col-xs-9 right"><span>one column of 9.</span></div>
  </div>

  <div class="row 4and8">
    <div class="col-xs-4 left"><span>one column of 4.</span></div>
    <div class="col-xs-8 right"><span>one column of 8.</span></div>
  </div>

  <div class="row 5and7">
    <div class="col-xs-5 left"><span>one column of 5.</span></div>
    <div class="col-xs-7 right"><span>one column of 7.</span></div>
  </div>

  <div class="row 6and6">
    <div class="col-xs-6 left"><span>one column of 6.</span></div>
    <div class="col-xs-6 right"><span>one column of 6.</span></div>
  </div>

  <div class="row 7and5">
    <div class="col-xs-7 left"><span>one column of 7.</span></div>
    <div class="col-xs-5 right"><span>one column of 5.</span></div>
  </div>

  <div class="row 8and4">
    <div class="col-xs-8 left"><span>one column of 8.</span></div>
    <div class="col-xs-4 right"><span>one column of 4.</span></div>
  </div>

  <div class="row 9and3">
    <div class="col-xs-9 left"><span>one column of 9.</span></div>
    <div class="col-xs-3 right"><span>one column of 3.</span></div>
  </div>

  <div class="row 10and2">
    <div class="col-xs-10 left"><span>one column of 10</span>.</div>
    <div class="col-xs-2 right"><span>one column of 2</span></div>
  </div>

  <div class="row 11and1">
    <div class="col-xs-11 left"><span>one column of 11</span>.</div>
    <div class="col-xs-1 right"><span>one column of 1</span></div>
  </div>

  <div class="row 12fullwidth">
    <div class="col-xs-12 single"><span>one column of 12</span></div>
  </div>

</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/-Infamous/understanding-bootstrap-columns-rows-and-containers-MoXzwz */
/*--------------------
CSS FOR BOOTSTRAP GRID
--------------------*/

.left, .right, .individual, .single {
  height: 35px;
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left span, .right span, .individual span, .single span {
  color: grey;
  font-size: 12px;
  text-transform: capitalize;
}

.individual {
  background-color: rgba(0, 255, 0, 0.3);
}

.single {
  background-color: rgba(255, 0, 0, 0.3);
}

.left {
  background-color: rgba(255, 255, 0, 0.3);
}

.right {
  background-color: rgba(255, 0, 255, 0.3);
}

/*--------------------
  CSS FOR INFO CONTENT
--------------------*/
.landing-information {
  height: 430px;
  background-color: #3D3B44;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-wrap {
  text-align: center;
}

.text-wrap h1, .text-wrap h2, .text-wrap h3, .text-wrap p {
  color: #CCA32C;
}

.text-wrap h1 {
  font-size: 2.5vw;
  text-decoration: overline;
}

.text-wrap h2 {
  font-size: 1.3vw;
  text-decoration: underline;
}

.text-wrap h3 {
  font-size: 1vw;
}

.text-wrap p {
  font-size: .8vw;
  line-height: 20px;
}

@media screen and (max-width: 1210px) {
  .left span, .right span, .individual span, .single span {
    font-size: 10px;
  }
  .landing-information {
    height: 350px;
  }
}

@media screen and (max-width: 720px) {
  .left span, .right span, .individual span, .single span {
    font-size: 8px;
  }
}