The Bootstrap grid system seems to be malfunctioning as the columns are unexpectedly stacking up

Currently, I am working on familiarizing myself with Bootstrap, and I am interested in creating a simple layout with three columns in one row.

Below is the code that I have been using, which I copied from an example in the Bootstrap Documentation.

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>

<body>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <div class="container">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>
</body>

</html>

Despite experimenting with various column sizes such as "col-sm", "col-xs", and different number combinations like "col", "col-different sizes", "col-different sizes-different numbers from 2 to 12", my columns always end up stacking vertically. I have tried multiple solutions from both stackoverflow and across the internet with no success.

Thank you in advance

Answer №1

Appreciate all the assistance.

The issue stemmed from improperly integrating Bootstrap's CSS.

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 process of turning a picture from a menu file into a clickable link?

I have created a menu with some images included, and I want them to be clickable links. However, currently only the text on top of the images acts as a link when hovered over. I would like the entire image to be clickable, not just the text. I believe I ...

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

Tips for displaying <p> element upon hovering over a specific area of an SVG image

I created a map and converted it to SVG. I want to display the name of each neighborhood when a user hovers the mouse over it. I'm not sure how to achieve this or how to isolate the specific area of a neighborhood to make changes. Here's a scre ...

Creating a seamless fusion of GenericHtmlControl/Literal with an Asp.net Control through dynamic rendering

My Environment is: ASP.NET 4.62 / C# / Boostrap 4 framework My application dynamically generates a bootstrap 4 menu from a database query. I have a div in the aspx page <div id="myNav" runat="server"></div> and I add code ...

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

What is the best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

Guide to configuring a background image from the public folder in a React application using Create React App

How do I properly set a background image in a .css file located in the src folder? src/Components/Component/Comp.css .services { background-image : url("./images/img-2.jpg"); background-position: center; background-size : cover; b ...

width and height specifications for the device

Struggling to determine the device-height after setting predefined device-widths such as: For Extra small devices Phones (<768px) For Small devices Tablets (≥768px) For Medium devices Desktops (≥992px) For Large devices Desktops (≥1200px) I& ...

Enhancing the Bootstrap carousel slider with offset background content container

Apologies if the title seems a bit unclear. I want to clarify that I am working with the latest version of pure Bootstrap (https://getbootstrap.com/) and nothing more. My goal is to replicate the layout shown in the following image for a client: https:// ...

Disabling the underline style on a4j:commandLink

Current Software Versions: Apache MyFaces 2.0 Rich Faces 4.3 Migration Challenge: We are in the process of upgrading from JSF version 1.2 to JSF version 2. One issue we have encountered is that there is no native support for sorting in rich:dataTable. ...

Complete guide on importing the Material UI library into a React JS project

I'm currently working on building a React web page with Material UI. When working with any element, I understand that I need to import it first. Can someone please guide me on how to import the entire Material UI library? ...

Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below: In order to achieve this, three divs were created: <div class="row"> <div class="col-md-3">Text</div> & ...

Arranging my table

I've been trying to adjust the position of a table in my project that contains an image. Currently, it is aligned to the left and I want to move it to the right. Here is the code for my table: <TD> <IMG SRC='http://farm8.staticflickr.co ...

Ways to achieve varying border widths among multiple divs that are linked to text size

Hey there, I'm looking to make some changes to the UI of my game. I want to transform it from this: https://i.sstatic.net/iLpFY.jpg To this (which is an edited version using paint.net of the previous image): https://i.sstatic.net/qudVm.jpg <html& ...

The utilization of CSS variables within intricate properties

Imagine having a CSS property called box-shadow: box-shadow: 5px 5px 0 #ccc; What if there is a need to create a variable from the color #ccc? While in SCSS, you could accomplish this with code like: $grey: #ccc; .element { box-shadow: 5px 5px 0 $gre ...

What is the most effective method for relocating a DIV element across the webpage?

Struggling to find a solution for my problem. I have functions that fetch data from an API and display it in a div when a user right-clicks on a context menu. The div is currently fixed to the bottom right of the page, but I want it to be draggable so user ...

Adhesive Navigation Bar

Check out this link: JSFIDDLE $('.main-menu').addClass('fixed'); Why does the fixed element flicker when the fixed class is applied? ...

Unable to connect CSS/JS files to the HTML page

I followed a tutorial to set up my project which can be found here: However, when I run the gulp file, the CSS/JS files are not being linked. I have applied a background color to the body but it is not showing up. I installed Bootstrap 4 using npm and ad ...

The CSS selectors wrapped in jQuery vary between Chrome and Internet Explorer 11

When utilizing a jquery wrapped css selector such as $($("#selector").find('input[type="textarea"])'), I am able to input values into the textarea in Chrome using $($("#selector").find('input[type="textarea"]).val(someValue)') but encou ...

What is the best way to insert a JavaScript button before an HTML button on a webpage?

Currently, I am working on creating a calculator using JavaScript and HTML. My goal is to add memory buttons (MS, MC, MR) before the clear button (C) on the calculator interface. Despite trying various methods, I am facing some challenges in achieving this ...