Bootstrap 3 Grid Example

Developer
Sky
Size
2,111 Kb
Views
2,024
  1. Bootstrap 3 Grid Example Previews
  2. Bootstrap 3 Grid Example HTML Codes
  3. Bootstrap 3 Grid Example CSS Codes

How do I make an bootstrap 3 grid example?

What is a bootstrap 3 grid example? How do you make a bootstrap 3 grid example? This script and codes were developed by Sky on 29 January 2023, Sunday.

Bootstrap 3 Grid Example Previews
IQ Test

Bootstrap 3 Grid Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap 3 Grid Example</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3>&lt;--- resize your browser ---&gt;</h3>
<div class="container"> <h2>1 centered column, using an offset</h2> <div class="row"> <div class="col-xs-8 col-xs-offset-2">col-xs-8 col-xs-offset-2</div> </div>
</div>
<div class="container"> <h2>2 centered columns, using an offset</h2> <div class="row"> <div class="col-sm-4 col-sm-offset-2">col-sm-4 col-sm-offset-2</div> <div class="col-sm-4">col-sm-4</div> </div>
</div>
<div class="container"> <h2>Different sizes for different screen widths</h2> <h4>100% wide on xs, 83% on sm, 50% on md, 25% on lg</h4> <div class="row"> <div class="col-sm-10 col-md-6 col-lg-3">col-sm-10 col-md-6 col-lg-3</div> </div>
</div>
<div class="container"> <h2>Different locations for different screen widths</h2> <h4>Left on xs, right on lg, middle on sm and md</h4> <div class="row"> <div class="col-xs-6 col-sm-6 col-sm-offset-3 col-lg-6 col-lg-offset-6">col-xs-6 col-sm-6 col-sm-offset-3 col-lg-6 col-lg-offset-6</div> </div>
</div>
<div class="container"> <h2>3 divs equally spaced</h2> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div> <div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div>
</div>
<div class="container"> <h2>12 divs equally spaced</h2> <div class="row"> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> </div> <div class="row"> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-1</div> </div> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> </div> <div class="row"> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> </div>
</div>
</body>
</html>

Bootstrap 3 Grid Example - Script Codes CSS Codes

body { background-color: #222; color: #eee; text-align: center; margin-bottom: 70px;
}
/* give some room at the top of the page */
.container { margin-top: 70px;
}
/* make each row a little taller than the text inside */
.row { min-height: 3em; line-height: 3em;
}
/* styling for all the columns for example display purposes only */
[class^="col"] { border: 1px solid white; overflow: hidden; white-space: nowrap;
}
[class^="col-lg"] { background-color: #3366ff;
}
[class^="col-md"] { background-color: #5588ff;
}
[class^="col-sm"] { background-color: #77aaff; color: #222;
}
[class^="col-xs"] { background-color: #835FFF; color: #222;
}
Bootstrap 3 Grid Example - Script Codes
Bootstrap 3 Grid Example - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 2,111 Kb
Views 2,024
Do you need developer help for Bootstrap 3 Grid Example?

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!

Sky (skycoder) Script Codes
Name
JSONP Examples with the Dark Sky API
Search box that submits when you hit Enter
Colors and Sounds
Show the Local Weather - and a local background image
Wikipedia Viewer
Portfolio - Work In Progress
Media Queries
Calculator
Vanilla JS Forismatic Example
FCC Leaderboard - vanilla JS
Create amazing web content 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!