As of version 2.3.2, Bootstrap provides two types of grids, the default grid system and the fluid grid system. The default grid system is 940px wide and 12 columns. This article mainly explains the first type.
- First let’s see how to apply the default grid system
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
Bootstrap uses CSS classes "row" to create horizontal rows, and the CSS class "spanx" (x values from 1 to 12) to create vertical columns. Using these two, you can create a three-column grid (each column contains some text content), and the HTML looks like this
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body><div class="container"><div class="row"> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div></div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The syntax for creating a grid is as follows:
<div class="row"><div class="spanx">inline elements like span, block level elements like p, div.</div> <div>
CSS 代码 解释.span12 { width: 940px;} 如果该行有一个单一的列，列宽为 940px。.span11 { width: 860px;} 如果该行有一个由 11 列合并的列，列宽为 860px。.span10 { width: 780px;} 如果该行有一个由 10 列合并的列，列宽为 780px。.span9 { width: 700px;} 如果该行有一个由 9 列合并的列，列宽为 700px。.span8 { width: 620px;} 如果该行有一个由 8 列合并的列，列宽为 620px。.span7 { width: 540px;} 如果该行有一个由 7 列合并的列，列宽为 540px。.span6 { width: 460px;} 如果该行有一个由 6 列合并的列，列宽为 460px。.span5 { width: 380px;} 如果该行有一个由 5 列合并的列，列宽为 380px。.span4 { width: 300px;} 如果该行有一个由 4 列合并的列，列宽为 300px。.span3 { width: 220px;} 如果该行有一个由 3 列合并的列，列宽为 220px。.span2 { width: 140px;} 如果该行有一个由 2 列合并的列，列宽为 140px。.span1 { width: 60px;} 单个列宽为 60px。 Bootstrap default grid Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Grid System Example - w3cschool Bootstrap Tutorial</title> <meta name="description" content="Creating a 16 columns Grid with Bootstrap. Learn with examples to create a Grid System in Bootstrap."> <link href="booststrap/css/bootstrap.min.css" rel="stylesheet"> <style>.span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;}h3 {margin: 10px 0 10px 0;}</style></head><body><div class="container"><div class="row"><div class="span12"><h1 id="w-cschool-cc-is-a-web-design-and-development-tutorial">w3cschool.cc is a web design and development tutorial.</h1> </div></div><div class="row"><div class="span12"><p>w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes.</p> </div></div><div class="row"><div class="span12"><h3 id="Some-of-the-topics-and-more">Some of the topics and more... :</h3> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/html5_logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="html5 logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/javascript-logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="javascript logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/json.gif" class="lazy" style="max-width:90%" style="max-width:90%" alt="JSON logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/php.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="PHP logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/mysql-logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="MySQL logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/browser-statistics.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Browser Statistics logo" /></p> </div></div><div class="row"><div class="span12"><h3 id="Social-networking-sites-to-share">Social networking sites to share:</h3> </div></div><div class="row"><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/gplus.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="GPlus logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/twitter.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Twitter logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/orkut.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Orkut logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/ipad.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="iPad logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/digo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Digo logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/zapface.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Zapface logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/facebook.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="facebook logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/netvibes.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Netvibes logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/linkedin.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="LinkedIn logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/newsvine.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Newsvine logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/blogger.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Blogger logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/reditt.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Reddit logo" /></p> </div></div><div class="row"><div class="span3"><h3 id="Fontend-Development">Fontend Development:</h3> <p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p></div><div class="span3"><h3 id="Backend-Developemt">Backend Developemt:</h3> <p>PHP, Ruby, Python, Java, ASP.NET, SCALA</p></div><div class="span3"><h3 id="Database-Management">Database Management:</h3> <p>SQL, MySQL POstgreSQL, NoSQL, MongoDB</p></div><div class="span3"><h3 id="APIs-Tools-and-Tips">APIs, Tools and Tips:</h3> <p>Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG</p></div></div></div></body></html> The effect is as follows:
Offset column: Default grid
By using offsets, you can move a column to the right of its original position. This is accomplished by adding a left margin to the column. With Bootstrap, you can use the "offsetx" (where the value of x is a positive integer) class and the class "spany" (where the value of y is a positive integer). Depending on the value of 'x' in 'offestx', the relevant column is shifted to the right by 'x' column widths.
The offset width is defined in Bootstrap CSS. The highest left margin of offset12 is 980px, and the lowest left margin of offset1 is 100px.
Since the default grid system is pixel based, when applying an offset you must know which pixels you want to use for the offset and which pixels you want to use for the columns. These two combined must not exceed the number of pixels in your horizontal viewport.
In the example below, we will create a two-column grid. In it, we move the left column 4 columns to the right. The HTML code is as follows:
<!DOCTYPE html><html> <head> <title>Bootstrap offsetting column example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <div class="row"><div class="span4 offset4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div><div class="span3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div></div></div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The rendering is as follows:
Nested columns: Default grid
Using Bootstrap's default grid, columns can be nested. You simply create a row within the columns and create as many columns as you want nested within the row. At the same time, you must remember that the total number of columns used to nest other columns must not exceed the number of columns mentioned when you created the parent column.
The following example shows how to nest columns in Bootstrap's default grid.
<!DOCTYPE html><html> <head> <title>Bootstrap nested columns example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <div class="row"> <div class="span7"> <div class="row"> <div class="span4"> <p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> <div class="span3"><p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> </div> </div> <div class="span5"> <p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The effect is as follows:
HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AMThe function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
