Common Bootstrap 3 Grid Layouts

Developer
Jacob Lett
Size
2,157 Kb
Views
22,264
  1. Common Bootstrap 3 Grid Layouts Previews
  2. Common Bootstrap 3 Grid Layouts HTML Codes
  3. Common Bootstrap 3 Grid Layouts CSS Codes

How do I make an common bootstrap 3 grid layouts?

What is a common bootstrap 3 grid layouts? How do you make a common bootstrap 3 grid layouts? This script and codes were developed by Jacob Lett on 28 November 2022, Monday.

Common Bootstrap 3 Grid Layouts Previews
IQ Test

Common Bootstrap 3 Grid Layouts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Common Bootstrap 3 Grid Layouts</title> <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=1"></script> <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"> <div class="page-header"> <h1>Common Bootstrap 3 Grid Layouts</h1> </div> <!-- /page-header --> <h2>One column centered</h2> <div class="row"> <div class="my-cb center-block"> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"></div> </div> <h2>Two column</h2> <div class="row"> <div class="col-md-6"> </div> <!-- /.col-md-6 --> <div class="col-md-6"> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> <h2>Two column - Golden Ratio Left</h2> <div class="row"> <div class="col-md-8"> </div> <!-- /.col-md-6 --> <div class="col-md-4"> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> <h2>Two column - Golden Ratio Right</h2> <div class="row"> <div class="col-md-4"> </div> <!-- /.col-md-6 --> <div class="col-md-8"> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> <h2>Three column</h2> <div class="row"> <div class="col-md-4"> </div> <!-- /.col-md-6 --> <div class="col-md-4"> </div> <!-- /.col-md-6 --> <div class="col-md-4"> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> <h2>Four column</h2> <div class="row"> <div class="col-md-3"> </div> <!-- /.col-md-6 --> <div class="col-md-3"> </div> <!-- /.col-md-6 --> <div class="col-md-3"> </div> <!-- /.col-md-6 --> <div class="col-md-3"> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> <h2>Five column - Needs custom styles, see CSS</h2>
<div class="row five-columns"> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div>
</div> <h2>Six column</h2> <div class="row"> <div class="col-md-2"> </div> <!-- /.col-md-6 --> <div class="col-md-2"> </div> <!-- /.col-md-6 --> <div class="col-md-2"> </div> <!-- /.col-md-6 --> <div class="col-md-2"> </div> <!-- /.col-md-6 --> <div class="col-md-2"> </div> <!-- /.col-md-6 --> <div class="col-md-2"> </div> <!-- /.col-md-6 --> </div> <!-- /.row -->
</div>
<!-- /.container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

Common Bootstrap 3 Grid Layouts - Script Codes CSS Codes

/* add width to element with .center-block because its default is 100% */
.my-cb {width:200px;}
/* Used for demo purposes */
.row div { margin-bottom:1em;background:blue;opacity:0.4;}
.row div:nth-child(odd) {background-color:orange;}
.row div:after {content: " ";background:#ccc;width:100%;display:block;height:30px;}
/* start of modification for 5 columns */
@media (min-width: 768px){ .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2 { width: 20%; *width: 20%; }
}
@media (min-width: 1200px) { .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2 { width: 20%; *width: 20%; }
}
@media (min-width: 768px) and (max-width: 979px) { .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2 { width: 20%; *width: 20%; }
}
/* end of modification for 5 columns */
Common Bootstrap 3 Grid Layouts - Script Codes
Common Bootstrap 3 Grid Layouts - Script Codes
Home Page Home
Developer Jacob Lett
Username JacobLett
Uploaded November 28, 2022
Rating 3
Size 2,157 Kb
Views 22,264
Do you need developer help for Common Bootstrap 3 Grid Layouts?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jacob Lett (JacobLett) Script Codes
Name
Custom Bootstrap Social Share Buttons
Bootstrap 3 Centered Login
Image Gradient Overlay
Bootstrap 3 Carousel Multiple Items Increment by 1
Transparent background image jumbotron
Bootstrap 4 Off Canvas Side Menu Navbar
Bootstrap Sitemap Template - Alphabetical
Full width carousel with a maximum height and art direction
Bootstrap 4 Rounded Text Input and Textarea
Stop YouTube iframe video playback jQuery
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!