Vertical stacking of Bootstrap columns rather than horizontal orientation

.card {
  height: 600px;
  width: 800px;
  background-color: darkseagreen;
  padding: 20px;
}

.box1 {
  background-color: floralwhite;
}

.box2 {
  background-color: rgb(238, 185, 80);
}

.box3 {
  background-color: indianred;
}

.box4 {
  background-color: rgb(137, 137, 235);
}

.box5 {
  background-color: rosybrown;
}

.box6 {
  background-color: sienna;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a6bca7bca1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row card mx-auto">
    <div class=" col-4 box box1">BOX1</div>
    <div class=" col-4 box box2">BOX2</div>
    <div class=" col-4 box box3">BOX3</div>
    <div class=" col box box4">BOX4</div>
    <div class=" col box box5">BOX5</div>
    <div class=" col box box6">BOX6</div>
  </div>
</div>

I have been attempting to utilize the bootstrap grid system for creating a grid layout. However, I am facing an issue where the columns are stacking vertically instead of horizontally. My goal is to achieve a grid layout similar to the one shown in this picture:

https://i.sstatic.net/GsQWE.png

htmlcssbootstrap-4bootstrap-grid

Answer №1

The reason for the issue is due to the utilization of the card class.

The card class is a predefined class in Bootstrap that arranges the items within it vertically.

To resolve this problem, you can easily change the class from card to something else like card2.

Here's a functional demonstration:

https://jsfiddle.net/es318vm7/1/

.card2 {
  height: 600px;
  width: 800px;
  background-color: darkseagreen;
  padding: 20px;
}

.box1 {
  background-color: floralwhite;
}

.box2 {
  background-color: rgb(238, 185, 80);
}

.box3 {
  background-color: indianred;
}

.box4 {
  background-color: rgb(137, 137, 235);
}

.box5 {
  background-color: rosybrown;
}

.box6 {
  background-color: sienna;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de9f3e8f3ee">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row card2 mx-auto">
    <div class=" col-4 box box1">BOX1</div>
    <div class=" col-4 box box2">BOX2</div>
    <div class=" col-4 box box3">BOX3</div>
    <div class=" col box box4">BOX4</div>
    <div class=" col box box5">BOX5</div>
    <div class=" col box box6">BOX6</div>
  </div>
</div>

Answer №2

If you want to modify the name on your container card, it will be necessary to choose a different one

The .card class is part of bootstrap's pre-built components and should not be directly used

Please refer to the code snippet below for customization options and make changes accordingly:

.card {
  height: 600px;
  width: 800px;
  background-color: darkseagreen;
  padding: 20px;
}

.box {
  min-height:150px;
  margin:10px;
  padding:10px;
}

.box1 {
  background-color: floralwhite;
}

.box2 {
  background-color: rgb(238, 185, 80);
}

.box3 {
  background-color: indianred;
}

.box4 {
  background-color: rgb(137, 137, 235);
}

.box5 {
  background-color: rosybrown;
}

.box6 {
  background-color: sienna;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a2afafa4a3a4a2b1a0f0e4feefdeeae4fa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row mx-auto">
    <div class="col-4"><div class="box box1">BOX1</div></div>
    <div class="col-4"><div class="box box2">BOX2</div></div>
    <div class="col-4"><div class="box box3">BOX3</div></div>
    <div class="col-4"><div class="box box4">BOX4</div></div>
    <div class="col-4"><div class="box box5">BOX5</div></div>
    <div class="col-4"><div class="box box6">BOX6</div></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

What is the correct way to set up getElementById?

Having some trouble with the getElementById() function not functioning as expected and unable to identify the issue. This is an excerpt of my HTML body: <button type="button" id="up">Increase Volume</button> <button type ...

javascripthtmlcss

What is the best way to assign a class to every cell in a table that has a specific string?

Currently, I am facing a challenge with a data visualizer project assigned to me by the company that recently hired me. The task involves extracting information from a MySQL database using PHP and integrating it into an HTML-CSS table. In this table, four ...

phphtmlstringhtml-table

Placing jQuery scripts in Blogger platform: A guide

After finding the correct codes to solve my problem in previous questions, such as How do I get an image to fade in and out on a scroll using jQuery?, I came across this helpful code snippet: var divs = $('.banner'); $(window).scroll(function(){ ...

javascriptjqueryhtmlblogger

How can HTML be dynamically inserted using JavaScript without utilizing an id attribute?

Is there a way to insert HTML using JavaScript without using IDs? I have tried document.getElementsByClassName("demo").innerHTML = "example";, but it didn't work. Are there any other methods to insert HTML content besides innerHTML using classes? ...

javascripthtmlinserthtml

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

javascriptjqueryhtmlcsscaching

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

I'm currently working on capturing the event triggered when the mouse hovers over a select box, regardless of whether it's collapsed or expanded. My approach involves using .on() in the following manner: $(document).on('hover', "select ...

javascriptjqueryhtml

Struggling to locate the reCAPTCHA button using Selenium

My current challenge involves dealing with a recapture using selenium. I need to locate it on the page and click on it, but I'm unable to find it even though it's visible on the page. Here's my code: def capthcha(url = "https://google. ...

pythonhtmlselenium-webdriver

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

Creating double borders on a single element without using a wrapping div is possible using only CSS

I am attempting to create a specific effect using just one element, aiming to eliminate the need for a wrapper div. Check out my progress so far: http://codepen.io/anon/pen/kdvex Although I have come close to achieving the desired effect by incorporating ...

htmlcss

What impact does the CSS float property have on line height and element positioning?

I'm facing an issue where I have a table cell with a button inside it. When I try to float this button, it not only moves horizontally but also changes its vertical position, shifting to the top of the line. For example: <table style="width: 100% ...

htmlcss

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

Here is an example of HTML code for a progress meter: <div class="col-md-3" style="margin-left: -20px;"> <div class="progress-pos active" id="progess-1"> <div class="progress-pos-inner"> Login </div> </di ...

javascriptjqueryhtml

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

Adjust the dimensions within the class in bootstrap

Objective: My goal is to adjust a CSS code to be 700 instead of 870, based on the second image. Challenge: Currently, the default value is set at 870 (as shown in picture 1), but I need to use CSS to change it to 700. I attempted to make this adjustm ...

jqueryhtmlcsstwitter-bootstrap

The currency exchange script is malfunctioning and not functioning properly

Is there a solution for accessing the JSON value that is currently eluding me? If anyone has any suggestions, I would greatly appreciate it. function forex() { var to = document.getElementById("to").value; alert(to); var from = document.getE ...

javascriptjqueryjsonhtml

Designing an eye-catching header with Bootstrap 4 framework

I'm looking to implement a consistent menu-bar across all pages of my website. After attempting to use the Create PHP header/footer, I encountered an issue where the drop-downs in my Bootstrap 4 navbar stopped functioning. Any assistance would be gr ...

phpbootstrap-4

How can you use HTML and SVG to move just one endpoint of a line using a mouse click?

I have been exploring ways to selectively move one end of a line, but I am encountering difficulties as it keeps altering the container and ultimately redrawing the entire line. Here is a JSFiddle link for reference: https://jsfiddle.net/h2nwygu8/1/ < ...

javascriptcsshtml

Tips for incorporating a Spotify-style play button using CSS into a table row

Hey there! I recently attempted to customize my button like Spotify. I wanted the table row to display a play button when hovered over, and when clicked, the image would change. https://i.sstatic.net/aJIna.jpg After seeking advice from another fiddle an ...

javascripthtmlcss

What is the best way to use jQuery to display the character represented by an ASCII code &###?

Struggling with printing text? I am trying to append some content to an array, but it's showing special characters like &aacute; instead of the actual accented letters. Any suggestions on how to fix this issue? This is for a select tag, so I&apos ...

jqueryhtml

Creating visually appealing error messages with HTML and CSS

As part of a CSS/HTML challenge, I am trying to customize a validation error message without using JavaScript. My goal is to make it look like this image This is the code I have so far. HTML <p> It only takes a minute to sign up and our free sta ...

htmlcss