Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Grid System Example: Mobile, Tablet, Desktop Bootstrap Grid System Example: Stacked Horizontal

Bootstrap Grid System Example: Medium and Large Devices

In Example: Stacked Horizontal In this section, we have looked at the basic grid system. Here, we use 2 divs, and center them in the viewport width. 50%/50% Split:

<div>....</div>
<div>....</div>

But on large devices, you will finally design it as 33%/66%. So what we need to do is prepare to change the width of the columns at the breakpoints:

<div>....</div>
<div>....</div>

Now Bootstrap on medium devices, it will look for classes with md class, and use them. On large devices, it will look for classes with lg class, and use them. In this example, our 2 divs will be split from 50%/50% Split into 33%/66%. Please check the following examples for verification. (In this example, styles are defined for each column separately, which you can avoid doing.)

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap Example　-　Medium and large devices</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world! занима/h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-lg-4" style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. And　
　　　　　　　　　　　　enim ad minim veniam, who does not seek to exercise his own labor　
　　　　　　　　　　　　not to take advantage of any of them for the sake of comfort　
　　　　　　　　　</p>
　　　　　　　　　<p>On the other hand, to look at the origin of all this error and recognize the pursuit of pleasure　
　　　　　　　　　　　　accusantium doloremque laudantium, to fully understand all things, and to recognize them　
　　　　　　　　　　　　which he discovered the truth and the like of an architect of happiness　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6　col-lg-8" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<p>On the other hand, to look at the origin of all this error and recognize the pursuit of pleasure　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　<p>Not that there is anyone who is not aware that pain is an inherent part of life,　
　　　　　　　　　　　　consectetur, to desire, yet because of the fact that he never does so　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Test and See ‹/›

The results are as follows:

Bootstrap Grid System Example: Mobile, Tablet, Desktop Bootstrap Grid System Example: Stacked Horizontal