Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Grid System Example: Medium and Large Devices

Bootstrap Grid System Example: Mobile, Tablet Computer, Desktop Computer

We have already seen medium and large devices . Now, let's look at another example. We will make it applicable to small mobile phones as well. We will split the tablet computer's columns into 25%/75, and we will add the following options:

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

Now, we provide 3 Different column layouts for three devices. On mobile phones, it will be 25% to the right 75% layout. On tablet computers, it will be 50%/50% layout. On large viewport devices, it will be 33%/66Layouts. Please check the following examples for verification. (Styles are defined for each column here, which you can avoid doing.)

Online Examples

Example

<!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap Example　-　Mobile, tablet computer, desktop computer</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-sm-3　col-md-6　col-lg-8"　　
　　　　　　　　　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</p>
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-sm-9　col-md-6　col-lg-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
　　　　　　　　　　　　consectetur, ad idisci velit, sed quia non numquam eius Modi　
　　　　　　　　　　　　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: Medium and Large Devices