Utilizing Bootstrap, the layout structure consists of 4 columns for desktop, 3 columns for small laptops, 2 columns for tablets, and

I need assistance with setting up responsive columns in my HTML code using Bootstrap. Specifically, I want 4 columns per row on desktop, 3 columns per row on tablet, and 2 columns per row on mobile devices. Despite searching on Stack Overflow, I couldn't find a clear answer or explanation.

Here is the code I've written:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Bootstrap Code</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xxxxxxx" crossorigin="anonymous" />
</head>

<body>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">box 1</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 2</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 3</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 4</div>
  </div>
  <!-- more rows here -->
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-yyyyyyyGwggsvTBZTKJ7uNxdKNRXcL81TWvqlDtkzTeC5qbT52gblj/VgX0ytBvj9Lu" crossorigin="anonymous"></script>

</html>
htmlcssbootstrap-5

Answer №1

The concept here is that the default layout includes 12 columns. Typically, you only require 1, 2, 3, or 4 columns per row as mentioned. This makes for easy division.

The classes col-something-number are set to either 16.66% or 50% of the total width based on the screen size and column count. For instance, 

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
signifies:

12/3 = 4 in a row for xl screens
12/4 = 3 in a row for lg screens
12/6 = 2 in a row for md screens
12/12= 1 in a row for sm screens


<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88d968a968895daddccd989">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />


<div class="container">
  <div class="row">
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 1</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 2</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 3</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 4</div>

  </div>
</div>

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 the drop-down button so that it can display the links from the side while keeping the button fixed in place?

https://i.stack.imgur.com/ftj6w.pnghttps://i.stack.imgur.com/VuCDo.png [I am new to creating websites and any assistance is welcomed.] This code snippet is used to display dropdown button links in a list format. My goal is to make the links appear on the ...

htmlcss

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

I am currently building all of my elements manually through the DOM tree, and I am attempting to insert a checkbox symbol in this manner: //Add date var tdDate = document.createElement("td"); tdDate.textContent = ("" + workoutList[idx].date); ...

javascripthtmldom

Top 10 SQL Query based on two specific columns

As a beginner programmer diving into the world of SQL, I am on a mission to create a table for my website that showcases the lowest 10 grades alongside student information. While I feel confident in most aspects of this task, I am struggling with crafting ...

phphtmlsqlsql-server

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

htmlcss

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within ...

javascriptjqueryhtmlcssfancybox

Is it possible to scroll a div on mobile without the need for jQuery plugins?

Upon investigating the initial query, we managed to implement D3js for identifying a scroll event. This allowed us to scroll the div #scroll-content from any location on desktop devices. However, we encountered an issue where this method does not function ...

javascripthtmld3.jsmobilescroll

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

I'm currently using Vue and Vuetify to create a unique layout that looks like this: https://i.stack.imgur.com/QBs3J.png The layout consists of a card with three rows: The first row displays the number of items and includes a search bar. The second ...

cssvue.jsvuetify.js

Tips for vertically centering text within a panel using Bootstrap 3

I am facing an issue where I have an image and a description inside a panel panel-default. The image is floated to the left while the description is on the right side. The image has the img-responsive class so that it adjusts according to the panel body w ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Unexpectedly, the digit '1' has mysteriously appeared on my website without any explanation

I have noticed that the number "1" is appearing on my website without me having implemented it myself. Currently, I am using a template.php file to manage page creation. I simply import the content code into a $the_content variable and then print it. To ...

phphtml

Utilize the Bootstrap responsive grid system to ensure that every row is filled with content, creating

I am working with a list of 8 results that I display in a responsive bootstrap grid. However, I want to only show the results that fill up entire rows. For instance, on a medium-sized screen, it appears as 2 rows with 4 results each. On a smaller screen, ...

javascripthtmlcssbootstrap-5

Curved edges on a text box featuring a scroll bar

I'm facing an issue with my website where I have a large amount of text in an html textarea that requires a scroll bar. The problem is, I'd like to add rounded corners to the textarea, but it doesn't look good with the scroll bar. Below is ...

htmlcssscrolltextareaborder

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

cssreactjstypescriptnext.jsstyled-components

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

javascriptcsshtml

Guide: "Adding markers to user-uploaded images - A step-by-step tutorial"

I'm struggling to create a website that allows users to upload images and use specific tools. However, I am facing an issue where the marker I want to add is appearing all over the webpage instead of just on the image itself. How can I confine it to o ...

javascriptjqueryhtmlcss

Adding personalized designs to the currently selected date in Bootstrap Datepicker

Currently, I am working with the bootstrap-datepicker in conjunction with Bootstrap 5. My goal is to change the background color of the active date in the date picker. Despite my efforts to apply custom styling, it seems that my changes are not taking effe ...

bootstrap-5bootstrap-datepicker

Container beyond div

Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided? Appreciate any assistance. Live ...

htmltwitter-bootstrapcssbootstrap-4

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click: 1. The active tab should display a blue underline color. 2. When clicking on a tab, the blue line should appear under the active tab (sim ...

htmlcssbootstrap-4tabsangular7