In bootstrap 3.0, columns are arranged in a vertical stack only

As a newcomer to web design, I've been struggling to figure out why my basic grid in Bootstrap 3 isn't working as expected. No matter what I try, my columns stack vertically instead of side by side and always resize to fill the browser window. This issue occurs on both Chrome and Firefox on desktop, as well as on Chrome mobile browsers. For context, I have been editing with Sublime 2 and organizing my Bootstrap files in a folder on Explorer, but I'm not sure if this setup is relevant.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 101 Template</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12{
height: 100px;
background-color: blue;
color: white;
text-align: center;
}
.col-xs-6{
height: 100px;
background-color: yellow;
color: black;
text-align: center;
border: 2px solid black;
}
</style>
</head>


<div class="container">
<div class="row">
  <div class="col-xs-12">col-xs-12
</div>
</div;

<div class="row">
  <div class="col-xs-6">col-xs-6
  </div>
  <div class="col-xs-6">col-xs-6
  </div>

</div>
<div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>
  </div>

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

I apologize for the messy code formatting, it's difficult to work on this while on holiday with only my 7-inch tablet at hand!

csstwitter-bootstrap

Answer №1

There appears to be an issue in your code regarding the references to 

col-md-4

I conducted a find/replace operation for all

-md-

and substituted it with

-xs-

This adjustment seems to have resolved the issue with Twitter Bootstrap. You can view the updated code on JSFiddle: http://jsfiddle.net/jdSF3/ The Body

<div class="container">
  <div class="row">
      <div class="col-xs-12">col-xs-12
   </div>
  </div>;

  <div class="row">
      <div class="col-xs-6">col-xs-6
      </div>
      <div class="col-xs-6">col-xs-6
      </div>

  </div>;
  <div class="row">
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
   </div>;
   <div class="row">
     <div class="col-xs-8">.col-xs-8</div>
     <div class="col-xs-4">.col-xs-4</div>
   </div>;
   <div class="row">
     <div class="col-xs-4">.col-xs-4</div>
     <div class="col-xs-4">.col-xs-4</div>
     <div class="col-xs-4">.col-xs-4</div>
   </div>;
   <div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
   </div>;
      </div>;

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

The CSS 

  .col-xs-12{
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
  }
  .col-xs-6{
    height: 100px;
    background-color: yellow;
    color: black;
    text-align: center;
    border: 2px solid black;
  }

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 best way to have text fit perfectly into a table cell?

In my asp.net table, the first column contains captions for each row of data. The length of these captions varies, with different amounts of words in each one. I am looking to align the first letters of each caption at the beginning edge of the cells (left ...

htmlcssasp.net

Vanishing border around the sticky table header

While working on creating a table in an excel style using html and css with a sticky header, I noticed that the borders on the table head appeared strange. Take a look at the code snippet below: table { border-collapse: collapse; position: relative ...

htmlcss

Experiencing difficulties in arranging Bootstrap columns based on media queries

I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should di ...

cssbootstrap-4media-queriesxhtml

How can I change the background color of a parent div when hovering over a child element using JavaScript

I am working on a task that involves three colored boxes within a div, each with a different color. The goal is to change the background-color of the parent div to match the color of the box being hovered over. CSS: .t1_colors { float: left; wid ...

javascripthtmlcsscolorshover

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

My website is based on Bootstrap 3 and ensuring that certain pages print properly is crucial for our customers. While most of the site prints fine, we are having issues with modal dialogs. I have been experimenting with Chrome's (v42.0.2311.135 m) CS ...

cssgoogle-chromeprinting

The video header on my webpage refuses to start playing upon loading

I have a video displayed in the header of my website, but it only starts playing once the user clicks on the home link in the menu to navigate to /index.html. It does not play automatically when the page first loads. I have also tried manually entering /in ...

htmlcssvideohtml5-video

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

javascripthtmlcssangular

Challenges arise when creating a complementary php script for a natural language form

I'm a beginner at this and all the PHP I've tried hasn't been successful. I've come across examples of Natural Language forms, but none with functional PHP. While I am familiar with PHP in traditional forms, integrating the two has been ...

phphtmlcssemailwebforms

Ways to change specific CSS class properties in a unique style

As a Java programmer using primefaces 5.1, I've encountered some challenges with handling CSS classes. One particular issue I'm facing is the need to override certain CSS properties to remove the rounded corners of a DIV element. The rendered cod ...

htmlcssprimefaces

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

cssreactjsanimationautocompletematerial-ui

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

Is there a way to connect a button to a modal on a different page so that when the button is clicked, it opens another page (in a new tab with target 0) with the modal already displayed? ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

csstwitter-bootstrap

Is there a method to construct this? It appears quite challenging to create the intricate lines

I want to achieve this specific layout, but I am unsure how to align the lines next to the boxes. Should I use display or position properties to accomplish this? Image illustrating my desired outcome ...

htmlcssreactjs

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

javascriptcssangularjspopup

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

Currently, I am working on implementing a Jquery infinite autoplay multiple carousel. What I have done is created two separate carousel blocks on the same page within the body section. <div class="rotating_block"> <div class="bl ...

javascripthtmljquerycsscarousel

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

jquerycsscookies

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with the :after property to see if it c ...

htmlcss