Hello Geeks,
I am here with the second day of my journey with bootstrap, today we learn Bootstrap's Grid system. If you have not read my first day's journey with Bootstrap then please first read that from here: Journey With Bootstrap: Day 1.
My first day's journey explained what Bootstrap is, its advantages, history and so on.
Now let's start the second day's journey.
Bootstrap's Grid System
We discussed previously that Bootstrap has the cool feature of being able to resize automatically based on the screen size of devices. We can organize content in multiple columns when using large screen devices but when we are using small-screen devices we need to customize the columns to prevent loss of content and also to look good of our applications or websites.
![Bootstrap Grid System]()
We have four types of screens:
- col-xs extra small screen size device such as smartphones (<768 px).
- col-sm small screen size device such as tablets (>=768 px).
- col-md medium screen size devices such as laptops (>=992 px).
- col-lg large screen size devices such as computers (>=1200 px).
Bootstrap's grid system are responsive and the columns are re-arranged depending on screen size.
Example of grid system
OutputOn medium screen:
![medium screen]()
Output on extra small size screen:
![different size column]()
Another Example:
- <!DOCTYPE html>
- <html>
- <head>
- <title>grid system</title>
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <script src="js/bootstrap.min.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- #border
- {
- text-align:center;
- color:#FFF;
- }
- #border1
- {
- background-color:#0C9;
- }
- <h3>Different coloumn for small screne and different for medium screen</h3>
- <div class="container" >
- <div class="row" id="border5">
- <div class="col-xs-4 col-md-3">part 1 (size 3)</div>
- <div class="col-xs-4 col-md-3">part 2 (size 3)</div>
- <div class="col-xs-4 col-md-3">part 3 (size 3)</div>
- <div class="col-md-3">part 4 (size 3)</div>
- </div>
- </div>
- </body>
- </html>
Output
On medium screen size:
![Output]()
On extra small size screen:
![Extra small size]()
Using these example we can understand how Bootstrap's Grid system works.
I hope you enjoying this Journey!
Thank you.