Using Bootstrap Col-MD Classes For Your Grid Layouts - BitDegree
Có thể bạn quan tâm
In the chapters that came before, we have covered using extra small and small grid classes. Now, this tutorial will get you familiar with Bootstrap Col-MD classes used for the medium (over 768 pixels) screens.
Using code examples, we will explain how to use these classes alone and also combine them with other sizing classes for more flexibility. That will allow your users to easily access your website regardless of the device they're using.
Contents
- 1. Bootstrap Col-MD: Main Tips
- 2. Combining Small and Medium Grids
- 3. Using Medium Grid Alone
- 4. Creating Auto Layouts
- 5. Bootstrap Col-MD: Summary
Bootstrap Col-MD: Main Tips
- Bootstrap 4 grid system offers a set of responsive classes to specify on what screens a certain layout works.
- The Bootstrap Col-MD class applies a grid column class to an element when the screen is wider than 768px.
- You can use these classes alone as well as combine them with others.
- To use them, you will have to include col-md-* in your code.
Combining Small and Medium Grids
The Bootstrap medium grid column classes apply when the screen is wider than 768px:
col-sm-4 col-md-8 col-sm-8 col-md-4Columns like these are created by using the class prefix .col-md-*. You will notice in the example two responsive grid column classes are combined: we used both col-sm-* and col-md-*. Therefore, both Bootstrap MD and small classes are used.
This means that if the screen or window is narrower than 768px, the columns will rearrange slightly. If the screen is extra small (less 576px wide), the layout will collapse and appear stacked. See the example to get a better idea:
Example Copy <div class="container"> <div class="row"> <div class="bg-info col-sm-4 col-md-3"> ... </div> <div class="bg-primary col-md-9 col-sm-8"> ... </div> </div> </div> Try it Live Learn on Udacity Pros- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Using Medium Grid Alone
Of course, Bootstrap MD can be used on its own as well. Take a look at the example below. You will see two columns are created, both with col-md-*:
Example Copy <div class="container"> <div class="row"> <div class="bg-info col-md-3"> ... </div> <div class="bg-primary col-md-9"> ... </div> </div> </div> Try it Live Learn on UdacityYou can also use col-md-offset-* class to move the columns to the right. Basically what this does is leave a * number of columns on the left side free. For example, including col-md-offset-2 would mean making Bootstrap leave a gap as wide as two columns on the left side of the grid.
Creating Auto Layouts
When using Bootstrap Col-MD classes, you can specify how many columns a grid column should span. However, if you don't, a layout will still be created. In this case, it will be an auto layout. Every column element will automatically be equal, and added up they will take the whole width:
Example Copy <div class="row"> <!-- Five 20% wide columns --> <div class="bg-primary col-md">1</div> <div class="bg-secondary col-md">2</div> <div class="bg-primary col-md">3</div> <div class="bg-secondary col-md">4</div> <div class="bg-primary col-md">5</div> </div> Try it Live Learn on UdacityBootstrap Col-MD: Summary
- Responsive classes are used to specify on what screens a certain Bootstrap layout works.
- The Bootstrap medium classes are used for screens wider than 768px.
- You may use Bootstrap col-md classes alone and combined with others for more flexibility.
Từ khóa » Html Bootstrap Col-md
-
Grid Options
-
Bootstrap Grid Examples - W3Schools
-
Bootstrap 4 Grid Examples - W3Schools
-
Meaning Of Numbers In "col-md-4"," Col-xs-1", "col-lg-2" In Bootstrap
-
Bootstrap 5 Class "col-md-4 " Is Not Working - Stack Overflow
-
Bootstrap 5 Grid System - Examples And Tutorial
-
Replace Bootstrap Layouts With CSS Grid - The Web Developer Blog
-
Grid System - Bootstrap - University Of Houston
-
Understanding The Bootstrap 5 Grid System - Tutorial Republic
-
[Solved]: Bootstrap Col-xs-* Not Working - Web Developers Planet
-
Bootstrap Grid System
-
Understanding Bootstrap's Grid System - Knowledge Base
-
Meaning Of Numbers In “col-md-4”,“ Col-xs-1”, “col-lg-2” In Bootstrap
-
CSS Grid Vs Bootstrap: Which One Is Better For You? - BrowserStack