In Bootstrap 3, when defined as <div class="col-md-3 col-lg-7">, how many columns does the div occupy in a md viewport?

In Bootstrap 3, the grid system uses a 12-column layout, meaning the total width of a row is designed to be divided into 12 equal parts. The classes assigned to columns define how many of these parts a certain element will occupy at different viewport sizes.

When you see the class "col-md-3," it indicates that this particular div will take up 3 out of the 12 available columns in the medium (md) viewport size. In this context, since md refers specifically to the medium viewport, the class col-md-3 directly determines the width of the div. Therefore, it occupies three columns of the grid layout when viewed in the medium viewport.

The classes following the md designation do not apply to the medium size; they apply to larger screens. For the large (lg) viewport, the div would occupy 7 columns, but this does not influence the div's behavior in the medium viewport. The total number of columns used (like 3 in medium or 7 in large) cannot exceed the total of 12 at any time, but for medium viewports, the relevant class is col-md-3, confirming the div occupies 3 columns.