Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows:

<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="description" content="description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#4faf54">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="style/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfef5fcefe9b3f7eeddafb3a4b3ae">[email protected]</a>/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-static-top">
<span class="navbar-brand">Title</span>
</nav>
<div class="container">
<div class="row">
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
</div>
</div>
</body>
</html>

Despite my efforts, I can't seem to get the columns to align next to each other and they always stack vertically.

Even copying the grid system example from the documentation hasn't helped in solving this issue.

For reference, I am using the latest version of Firefox on a Mac device.

htmlcssbootstrap-4

Answer №1

It appears from the code that you have implemented Bootstrap version 3, but the grid system being used is designed for Bootstrap 4. In Bootstrap 3, there isn't a class like col-2; consider using col-sm-2 instead or update to Bootstrap version 4, which utilizes CSS flexbox rather than floats.

I hope this information proves helpful!

Answer №2

Your current Bootstrap version is 3.4.1 which does not support the col-x class.

We recommend upgrading to Bootstrap version 4:

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="description" content="description">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> 
        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
        <link rel="manifest" href="site.webmanifest">
        <link rel="mask-icon" href="safari-pinned-tab.svg" color="#4faf54">
        <meta name="msapplication-TileColor" content="#2b5797">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="style/style.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  
    <body>
        <nav class="navbar navbar-static-top">
            <span class="navbar-brand">Title</span>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
            </div>
        </div>
    </body>
</html>

Answer №3

<html>
<head>
    <title>Unique Title</title>
    <meta charset="utf-8">
    <meta name="description" content="unique description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="unique-apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="unique-favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="unique-favicon-16x16.png">
    <link rel="manifest" href="unique-site.webmanifest">
    <link rel="mask-icon" href="unique-safari-pinned-tab.svg" color="#4faf54">
    <meta name="msapplication-TileColor" content="#2b5797">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="unique-style/style.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-static-top">
        <span class="navbar-brand">Unique Title</span>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-2">
                <h1>UNIQUE</h1>
            </div>
            <div class="col-2">
                <h1>UNIQUE</h1>
            </div>
            <div class="col-2">
                <h1>UNIQUE</h1>
            </div>
            <div class="col-2">
                <h1>UNIQUE</h1>
            </div>
        </div>
    </div>
     <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492a21283b3d67233a097b6770677a">[email protected]</a>/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
</body>

Answer №4

In my experience, the grid system was effective in Bootstrap version 3.4.1. All that was needed was to include the appropriate grid classes to ensure responsiveness:

  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)

For instance, using the class "col-sm-2" on a screen wider than 768px would cause them to sit beside each other seamlessly.

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

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

Is there a solution for the noticeable delay in loading fonts on a web page?

I've encountered an issue in my React project where a Google font I'm using seems to briefly load as a different font before switching to the correct one. How can I prevent this from happening? This is how I'm loading the font in public/ind ...

htmlcssreactjsgoogle-fonts

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide

React Href is not functioning as expected in relative paths

Recently, I delved into React apps and managed to create one with a router. Everything was smooth sailing in dev mode until I tried running index.html from the build folder after npm run build. It seems like all the href links are broken. I suspect somethi ...

javascripthtmlreactjsreact-router

Changing the Date Display format of a new Date() instance

Just starting out with the MEAN Stack I'm currently utilizing the new date() function to retrieve the date, but I prefer not to display the time offset. ...

javascripthtmlangularjsnode.js

Creating a <Box /> component in MaterialUI with styled components is a great way to customize the design and layout of your

@material-ui/styles offers a different way to customize default styles: import React from 'react'; import Box from '@material-ui/core/Box'; import { styled } from '@material-ui/core/styles'; const StyledBox = styled(Box)({ ...

javascriptcssreactjsmaterial-uistyled-components

Tips for changing the text in a .txt file that has been accessed through a $.get request

Is there a way to read and open a file, but update a specific value within it? For example, if my data.txt looks like: [ {"slot": "1", "name": "Bob"}, {"slot": "2", "name": "John"} ] and I want to update it with a query like: "UPDATE data.txt SET na ...

javascriptjqueryajaxhtmlphonejs

Establishing a unique title and favicon for non-HTML files on a website

Is there a way to specify a title and favicon for non-HTML files on a website? For instance, what if I have a link like https://example.com/files/image-or-something.png. In Chrome, the default behavior is to display the URL of the file as the title, with ...

htmlnode.jsexpress

Tips for making an appended element match the height of an image

After embedding the div .soonOverlay into specific .smallCatalogBlock's, I am facing difficulty in adjusting the height of soonOverlay to match only the height of the img within smallCatalogBlock. Currently, its height extends throughout the entire co ...

javascripthtmlcss

Using Array Data Format to Customize Color in Highcharts Funnel Chart

I have included the funnel visualization code that I've been working on. $(function() { var dataEx = [ ['1 Visit', 352000], ['2 Visits', 88000], ['3+ Visits', 42000] ], len = dataEx.length, ...

javascriptjqueryhtmlcsshighcharts

Sharing data between different JavaScript files using Knockout.js

I am working with two JavaScript files named FileA.js and FileB.js. Within FileA.js, there is a function called Reports.CompanySearch.InitGrid: function InitGrid(viewModel, emptyInit) { var columns = [ { name: 'CompanyName', ...

javascripthtmlasp.net-mvc-4knockout.js

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

I'm having trouble getting my images to display randomly on a page. The images are named 0 - 9.png and I am using a pre-made function for random number generation. However, when I try to call on this function later down the page, nothing appears. It ...

javascripthtmlfunctionrandom

Ensure that the div element spans the entire width of the screen

Having issues working with the div tag and encountering this problem: The left side doesn't extend as far as the right side, despite testing in multiple browsers. Here is the HTML code being used: <!DOCTYPE html> <html lang="en"> <h ...

htmlcss

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

javascripthtmlcssspring-mvc

Reordering Bootstrap 4.1 columns for improved visibility on smaller screens

I'm having trouble adjusting the column order for small screen resolutions in Bootstrap 4.1. I've added the order prefix but nothing seems to be changing. Here is a snippet of my HTML code. Can anyone offer assistance? <div class="container-f ...

cssbootstrap-4

Include an HTML attribute within a given string

Using jQuery, I am adding HTML content to a div. The variables rowString and inputString have been defined beforehand: $("#filterContainer").append( rowString + `<label class='filterLabel' for=${filter}>${filter}< ...

javascriptjqueryhtml

Exploration of search box with highlighted fields

Seeking assistance to enhance the highlighting feature after entering a letter in the search box. Here is the current code snippet: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="javascripts/jquery-1.11.0.min.js"&g ...

jqueryhtmlcsssearch

Update various components within a container

I have incorporated a function that automatically loads and refreshes content within a div every 10 seconds. Here is the script: $(function () { var timer, updateContent; function resetTimer() { if (timer) { window.clearTimeout(timer); ...

javascriptjqueryhtml

Retrieve specific nested array values in Handlebars based on an index's value

While I understand that this question may have been asked previously, my query pertains to obtaining data in a specific pattern since I am relatively new to Handlebars. Currently, I have some JSON data structured as follows: "value": [ { ...

htmlnode.jsjsonhandlebars.js

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mob ...

cssnode.jsexpresshelmet.js