Explain the usage of bootstrap col-md-** without resorting to inline styling

Consider the example below

<html>
<head>
</head>
<body>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
 
</body>
</html>

Is there a better way to structure this code? Like the example shown below. I find it confusing that the bootstrap grid rules need to be specified inline.

<html>
<head>
   <style>
      .div-alpha
      {
         col-xs:12;
         col-sm:12;
         col-md:4;
         col-lg:4;
         offset-md:4;
         offset-lg:4;
      }
   </style>
</head>
<body>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
</body>
</html>
htmlcssbootstrap-4

Answer №1

Don't forget, Bootstrap is simply a framework that can be customized to fit your needs. By applying Bootstrap's styling to your own selectors, you have the freedom to tailor it as you see fit.

The col- classes in Bootstrap provide different styles for elements based on breakpoints:

  • col-xs- is for max-width: 768px (specifically for phones).
  • .col-sm- applies to min-width: 768px.
  • .col-md- is for min-width: 992px.
  • .col-lg- corresponds to min-width: 1200px.

Remember that starting with the smallest media query and progressing to the largest is crucial due to specificity when using mobile-first design principles in Bootstrap 3. This order is essential for proper styling implementation.

If you want to replicate Bootstrap's behavior without excessive HTML, consider combining logic classes like in the following example:

/* Custom visibility */
.div-alpha {
  height: 100px;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

.row {
  margin-left: 15px;
  margin-right: 15px;
}

.row::after, .row::before {
  display: table;
  content: " ";
}

.row::after {
    clear: both;  
}

*::after, *::before {
  box-sizing: border-box;
}

.div-alpha {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/* .col-xs- */
@media (max-width: 768px) {
  .div-alpha {
    width:  100%;
  }
}

/* .col-sm- */
@media (min-width: 768px) {
  .div-alpha {
    width:  66.66666666%;
  }
}

/* .col-md- */
@media (min-width: 992px) {
  .div-alpha {
    width:  50%;
  }
}

/* .col-lg- */
@media (min-width: 1200px) {
  .div-alpha {
    width:  33.33333333%;
  }
}
<div class="row">
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
</div>

This code snippet applies Bootstrap concepts to custom classes for flexibility across different screen sizes. Check out this JSFiddle link for a live demo.

I hope this information proves useful! :)

Answer №2

It is not recommended to nest classes within classes in CSS, but if you're open to using JavaScript for this task, you can refer to the code snippet below:

var classes = "col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"
$('body').children('div').each(function () {
    $(this).addClass(classes);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to modify existing code in bootstrap4 using CSS?

Is there a way to customize the CSS in Bootstrap, specifically when it comes to changing the fonts and colors in the carousel component? If you have any insights on this, please share! ...

cssbootstrap-4overwrite

What is the best way to conceal my class element if the data-reviews number is under 5?

I have been experimenting with basic JavaScript for the data-reviews="2" scenario and it worked successfully. However, what I am aiming for is to hide the entire <span> section when the value of data-reviews is less than 5 or any specific ...

javascripthtmlcss

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

css

The ng-model does not reflect changes when using the JQuery datepicker

Currently, I have set up two textboxes for users to choose a date. I am utilizing JqQuery's datepicker UI to showcase a small calendar pop-up whenever the user clicks on the textbox. However, an issue arises when I select a date in the calendar popup ...

javascriptjqueryhtmlangularjsdatepicker

Modify the name of the selected option value

I am working on an html code where I need to replace the values 0, 1, and 2 with USA, Australia, and Canada respectively. I also need to know the name of these values in my MySQL database. Thanks! HTML <form method="post" id="countriesForm" name="cou ...

javascripthtmlmysql

What is the best way to adjust the size of an SVG image using the :before pseudo-class?

Is there a way to display an image in a CSS :before element? .withimage:before { content: url(path/to/image.svg); display: block; height: 20px; width: 20px; } I'm facing an issue where the height and width properties are applied to the eleme ...

csssvg

Struggling to integrate the navigation bar with Wordpress platform

For a while now, I have been facing challenges with the navigation bar on the WordPress theme I am currently creating. I am struggling to get the navigation bar to display correctly. Below is the code snippet from my header.php file: <body> &l ...

phphtmlcsstwitter-bootstrap

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Utilizing WebView in my application to display html content for reading ebooks presented a challenge during development. After parsing the ebook and converting it into an html string, I load this string into the WebView component. myView.setVerticalScro ...

androidhtmlcsswebview

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

"Clicking on a child link within a Bootstrap5 dropdown causes the dropdown menu

I integrated a dropdown feature to create a navigation menu. The issue I encountered is that when I expand a heading and click on a sublink, the menu collapses instead of redirecting me to the intended link. I suspect this has something to do with the co ...

htmlbootstrap-4drop-down-menubootstrap-5

Bootstrap 4 Row failing to fill entire div width

I am currently designing a bootstrap 4 layout with four columns, but starting with just three. I have an outer div container and an inner row with three columns. However, when I add borders to all the containers, I notice that the row does not expand to fi ...

htmlcsstwitter-bootstrapbootstrap-4row

Including new styles in CKEDITOR.stylesSet that pertain to multiple elements

My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...

csscross-browserckeditor

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

javascripthtmlvue.jselement-uielement-plus

What is the best way to execute a Java program from a PHP webpage after submitting a form?

I have a .php page where I am trying to run a Java program in the backend after submitting a form. I have attempted using exec() and system() functions, but unfortunately it is not working as expected. Can someone please provide assistance with this issue? ...

javaphphtml

What is the best way to display a single font in various sizes?

Have you ever noticed the unique typography on typedetail.com? The font sizes of the logo (TYPE DETAIL) and the title (ABOUT TYPE DETAIL) are different, with the first letters appearing larger than the rest. Surprisingly, upon inspecting the style sheets, ...

css

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

javascriptjqueryhtml

Align navigation bar using Angular Material

Trying to center my navbar has been a struggle for me. I attempted using 'layout-align='space-between center' but it's not taking up 100% width and is acting more like an inline element. I've been following the documentation close ...

cssangularjsflexboxangular-material

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

htmlcsslinecell