Common Bootstrap 4 Grid Layouts

Developer
Jacob Lett
Size
2,144 Kb
Views
14,168
  1. Common Bootstrap 4 Grid Layouts Previews
  2. Common Bootstrap 4 Grid Layouts HTML Codes
  3. Common Bootstrap 4 Grid Layouts CSS Codes

How do I make an common bootstrap 4 grid layouts?

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

Common Bootstrap 4 Grid Layouts Previews
IQ Test

Common Bootstrap 4 Grid Layouts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Common Bootstrap 4 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>Common Bootstrap 4 Grid Layouts</h2> <hr /> <h2>One column centered</h2> <div class="row justify-content-center"> <div class="col-md-6"></div> </div> <h2>Two column</h2> <div class="row"> <div class="col-sm-6"> </div> <!-- /.col --> <div class="col-sm-6"> </div> <!-- /.col --> </div> <!-- /.row --> <h2>Two column - Golden Ratio Left</h2> <div class="row"> <div class="col-sm-8"> </div> <!-- /.col-sm-6 --> <div class="col-sm-4"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>Two column - Golden Ratio Right</h2> <div class="row"> <div class="col-sm-4"> </div> <!-- /.col-sm-6 --> <div class="col-sm-8"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>Three column</h2> <div class="row"> <div class="col-sm-4"> </div> <!-- /.col-sm-6 --> <div class="col-sm-4"> </div> <!-- /.col-sm-6 --> <div class="col-sm-4"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>Four column</h2> <div class="row"> <div class="col-sm-3"> </div> <!-- /.col-sm-6 --> <div class="col-sm-3"> </div> <!-- /.col-sm-6 --> <div class="col-sm-3"> </div> <!-- /.col-sm-6 --> <div class="col-sm-3"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>Five column</h2> <p>Unable to have an equal number of columns equal 12 so this is not possible without custom CSS</p> <h2>Six column</h2> <div class="row"> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> <div class="col-sm-2"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>12 column</h2> <div class="row"> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> <div class="col-sm-1"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row --> <h2>No Gutters - Two column</h2> <div class="row no-gutters"> <div class="col-sm-6"> </div> <!-- /.col --> <div class="col-sm-6"> </div> <!-- /.col --> </div> <!-- /.row -->
</div>
<!-- /.container -->
<div class="container-fluid"> <h2>Two column Fluid</h2> <div class="row"> <div class="col-sm-6"> </div> <!-- /.col-sm-6 --> <div class="col-sm-6"> </div> <!-- /.col-sm-6 --> </div> <!-- /.row -->
</div>
<!-- /.container-fluid --> <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 4 Grid Layouts - Script Codes CSS Codes

/* add width to element with .center-block because its default is 100% */
/* Used for demo purposes */
body {margin:2em 0;}
.row div { margin-bottom:1em;background:orange;opacity:0.4;}
.row div:nth-child(odd) {background-color: orange;}
.row div:after {content: " ";background:#ccc;width:100%;display:block;height:30px;}
Common Bootstrap 4 Grid Layouts - Script Codes
Common Bootstrap 4 Grid Layouts - Script Codes
Home Page Home
Developer Jacob Lett
Username JacobLett
Uploaded November 28, 2022
Rating 3
Size 2,144 Kb
Views 14,168
Do you need developer help for Common Bootstrap 4 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
Bootstrap Form Template
Bootstrap 4 Basic Image Slider
Bootstrap 3 Centered Login
Stop YouTube iframe video playback jQuery
Bootstrap 3 Carousel Multiple Items Increment by 1
Bootstrap 3 Blog Template
Transparent background image jumbotron
Image Gradient Overlay
Bootstrap 3 Off Canvas Side Menu Navbar
Custom Bootstrap Social Share Buttons
Create amazing captions 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!