What does md stand for in col-md-4 in Bootstrap ?
Last Updated :
01 May, 2024
In Bootstrap, “md” in ‘col-md-4’ stands for the medium-sized devices breakpoint, targeting screens like tablets and small laptops within the responsive grid system, which comprises extra small (“xs”), small (“sm”), medium (“md”), and large (“lg”) breakpoints.
Explanation of col-md-4
- The col-md-4 class is part of the grid system and is used to define the width of a column within a row.
- col: It is the short form for “column,” which indicates that the class is related to the grid system.
- md: This stands for “medium” and refers to a medium-sized screen or viewport width. In Bootstrap, there are four main breakpoints or screen sizes, xs (extra small), sm (small), md (medium), and lg (large).
- 4: This number indicates the number of columns the element should occupy within its parent container. In this case, col-md-4 means the column will span four columns on medium-sized screens.
Approach
On medium-sized screens, three columns will align horizontally, each occupying one-third of the available width due to the ‘col-md-4’ class. When viewed on smaller screens, the columns will stack vertically, each spanning the full width of the screen without the medium breakpoint’s influence, distributing content accordingly.
Example: The example below shows the col-md-4 class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>Bootstrap classes</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>This is column 1</p>
</div>
<div class="col-md-4">
<p>This is column 2</p>
</div>
<div class="col-md-4">
<p>This is column 3</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...