Bootstrap causing issues with rendering DIV layout

Recently, I decided to try my hand at creating a 12 column layout with Bootstrap. However, despite following tutorials, my Divs are stacking on top of each other instead of aligning in a row layout with spans as expected. It's quite puzzling and I could use some assistance.

<body>
    <div class="row">
        <div class="span6">Text 123456</div>
        <div class="span6">Text 123456</div>
    </div>
</body>

I have created a fiddle using Chrome and Firefox if anyone wants to take a look: http://jsfiddle.net/vshtmczf/

csstwitter-bootstrap

Answer №1

To correctly format your content, make sure to have a parent element with the class "container" and use "col-xs-6" instead of "span6" since you are working with Bootstrap 3.2. Check out the documentation for more information.

Take a look at this example:

<body class="container">
    <div class="row">
        <div class="col-xs-6">Text 123456</div>
        <div class="col-xs-6">Text 123456</div>
    </div>
</body>

Here is a live demo on jsFiddle

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

Enhance the appearance of your printed pages by incorporating borders with the help of wkhtml

Is there a way to print a square border on each page of a multi-page PDF rendered using wkhtmltopdf, similar to the question asked here: Add borders to each printed page with CSS? I generate an HTML page as a variable and utilize snappy from https://githu ...

htmlcssprintingwkhtmltopdf

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Purchased a theme called HelpGuru and encountering issues with the CSS of the menu. Reached out to support but they were unable to assist, directing me to a company that specializes in customizing WordPress themes instead. The link to the demo can be found ...

csswordpressmenupseudo-class

modify the background color at core.scss line 149

I am struggling to change the background color of my Ionic login page. I have tried adding custom CSS in various places, such as core.scss:149, but it only works when I add it directly in Chrome developer tools. How can I get this custom background color t ...

cssangularionic-framework

Permit the use of HTML tags within a CSS-only tooltip

I have created a unique CSS tooltip. <span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span> ...

htmlcss

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

htmlcss

Tips for adjusting the size of numbers (e.g. 0, 1,4..) using CSS

I have a paragraph on my website that contains a phone number and an email address within the header section. I have styled them to be the same font-size: small, but for some reason, the phone number appears slightly larger than the email address when view ...

htmlcss

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

htmlcss

Tips for aligning field labels and items together on one line, even when the item is spread across multiple lines

I need to showcase a comprehensive list of countries: Countries: Angola, Botswana, Burundi, Comoros, DR Congo, Djibouti, Egypt, Eritrea, Ethiopia, Kenya, Lesotho, Libya, Madagascar, Malawi, Mauritius, Mozambique, Namibia, Rwanda, Seychelles, South Africa, ...

css

Example of using the CSS property white-space with break-spaces

I've been searching for an example of using css white-space: break-spaces for hours with no luck. Most tutorials only cover examples for normal, nowrap, pre, pre-wrap, pre-line. When it comes to break-spaces, the information available is limited to qu ...

csswhitespace

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to align an inline list in the center so that it is responsive across all

Here is the CSS code provided: .wrapper{ display: inline; line-height: 2em; width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; text-align: center; } ul{ list-style: none; } li{ list-style: none; } .craftb ...

htmlcss

Creating dynamic rows in React.js using Bootstrap for rendering

I am working with bootstrap and my goal is to display 4 columns in a row. The challenge is that I don't know beforehand how many columns there will be, so the layout should dynamically adjust for any number of columns. Additionally, the first column m ...

javascripttwitter-bootstraploopsreactjs

The inconsistent sizing and spacing between browsers is causing some strange issues for me

I can't shake this feeling that it should be so straightforward. I'll include screenshots from Chrome, Firefox, and IE 11 to illustrate. First things first, it's just a basic login form with email and password fields centered both verticall ...

htmlcss

Animate downwards pointing arrow to rotate 180 degrees upon activation

Is there a way to create a dropdown arrow that rotates when opened? I've experimented with different approaches, such as using CSS methods like .bd-aside .btn[aria-expanded="true"]::before {transform: rotate(90deg);}, along with ::after and ...

htmlcssbootstrap-5

Vertically center the button inside a MaterialUI grid

How can I vertically center align the button within this grid? I've tried using vertical-align but it doesn't seem to work. I'm currently adjusting the vertical position of the button using top: "30%", but I'm looking for a better way t ...

cssmaterial-ui

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

javascriptcssreactjsreact-native

The dropdown feature within a bootstrap button group is malfunctioning

As part of the web track in cs50, I am working on creating a webpage. My goal is to include options for navigating to the next or previous pages, as well as a dropdown menu with all the pages in between. However, when using Bootstrap's code, the dropd ...

htmlcssbootstrap-4cs50

Is it feasible to completely erase the coding history of a website that has been indexed

Is it possible to completely erase the code-history of a website once it has been indexed by Google and other search engines? I have some content on a website that I want to remove from history, but I'm not sure if it's possible due to factors li ...

javascripthtmlcsssearch-engine

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Looking to implement an underline effect using CSS for the active tab that mimics the hover effect already applied

How can I ensure that the underline on active tabs (Domov) matches the hover effect on other tabs? The border-bottom currently creates a border that is lower than the hover effect, resulting in inconsistent underlines as seen on this page - (try moving ...

htmlcss