Overlapping Elements with Bootstrap 3

I'm currently using Bootstrap 3 and I need help getting these two grids in my JS Fiddle demo to stack on top of each other instead of overlapping. The 

<div class="col-xs-12 col-md-8">

is overlapping 

<div class="col-xs-6 col-md-4">

I just want them to stack one on top of the other so that the "nav nav-pills nav-stacked" isn't hidden.

Check out the JS Fiddle example demo here

Below is the HTML Code you can refer to:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4">
            <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;">
                <li class="active"> <a href="#">link1</a>

                </li>
                <li> <a href="#">link2</a>

                </li>
                <li> <a href="#">link3</a>

                </li>
                <li> <a href="#">link4</a>

                </li>
            </ul>
        </div>
        <div class="col-xs-12 col-md-8">
            <div class="Rectangle_3_copy_2">
                <div class="Rounded_Rectangle_2"></div>
            </div>
htmlcsstwitter-bootstrap-3

Answer №1

If you're looking to make it stack, refer to the Bootstrap documentation.

Do you prefer your columns not to stack on smaller devices? Add .col-xs-* .col-md-* classes to your columns for extra small and medium device grid settings. Check out the example below to see how it all comes together.

By removing col-xs-*, the content will stack as desired.

View Bootply Demo

Answer №2

Do you need something similar to this example? http://jsfiddle.net/KCnJg/4/

<div class="container">
<div class="row">
    <div class="col-xs-6 col-md-4">
        <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;">
            <li class="active"> <a href="#">link1</a></li>
            <li> <a href="#">link2</a></li>
            <li> <a href="#">link3</a></li>
            <li> <a href="#">link4</a></li>
        </ul>
    </div>
</div>
 <div class="row">       
    <div class="col-xs-12 col-md-8">
        <div class="Rectangle_3_copy_2">
            <div class="Rounded_Rectangle_2"></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

Issue with res.sendFile not functioning as expected

I'm encountering difficulties with using express. I am trying to launch by typing localhost:3000/timer -> timetimer.html, but it's not functioning as expected. server.js: var express = require('express'); var path = require('p ...

javascripthtmlcssnode.jsexpress

Optimize Embedded Videos to Utilize Maximum HTML Element Width

I am facing an issue with embedding a Youtube video inside a td HTML element. I want the video to maintain its aspect ratio while expanding to fit the width of its parent td. My desired look for the video is like this: However, my current video appears l ...

javascripthtmlcss

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

htmlcssangular

What is the best way to adjust the fontSize of text within a table using Material UI?

In my Material UI table, I am attempting to adjust the fontSize of the contents. However, when I try to modify it using the style={{}} component, the changes are not being applied. <Grid><Typography variant="body1">Fiscal Year </Typography&g ...

cssreactjsmaterial-uiformsy-material-ui

Whenever I refresh the page, the values remain the same and only update when I log in

Is it possible for the user's statistics to automatically update when they reload the page, based on the database? For example, if a user registers with Money-0, Diamond-0, Ruby-0 and then adds 10 money, can their stats be automatically updated to Mon ...

javascriptphphtml

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

htmlcss

Saving Quill.js content to Laravel 5.6 Database: Step-by-step guide

For my project in Laravel, I wanted to implement Quill.js - a powerful rich text editor. However, the issue arises because Quill utilizes: <div id="editor"></div> || <div id="editor" name="body"></div> Instead of the usual: < ...

phphtmllaravellaravel-5quill

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

javascripthtmlcssnode.jsexpress

Maintaining uniformity in Python by assigning and populating empty values for any missing HTML tags to ensure consistency across structures

Here are the HTML lines I currently have: <nonDerivativeTable> <nonDerivativeHolding> # First Holding <securityTitle> <value>Common Stock</value> </securityTitle> <ownershipNat ...

pythonhtml

Guide to incorporating a rectangular image into a circular frame with CSS

I have a rectangular image with dimensions of 300px by 300px. To display this image within a circle, I have created the following CSS code: img { width: 300px; height: 300px; background-color: white; border-radius: 50%; border: 2px solid black; ...

htmlcss

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

htmlcssangular-clibootstrap-4

Mapping: transforming latitude and longitude into X and Y coordinates

for(let i = 0; i < jsonIncident.length; i++) { let latitude = jsonIncident[i].Latitude let longitude = jsonIncident[i].Longitude //Retrieve lat and lon for image position in x and y format let type = jsonInc ...

c#htmljsonesri

Adjust the width of the flex columns?

In one of my columns, I have a list that I'm splitting using CSS to wrap the data in the next column after a specific height. However, in the demo, you'll notice there's a lot of white space between the first and second columns. I'm uns ...

javascriptcssvue.jsvuetify.js

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

Function for when Tic Tac Toe results in a tie

I have developed a tic tac toe game using Javascript and now I have two questions. 1. How can I add a "start" button so that the game can only be seen or played after clicking on the button? And now for the challenging part: In case of a draw, I want t ...

javascripthtmlbuttontic-tac-toe

Using jQuery to animate the grayscale filter with a value of 0

Currently, I am implementing the Waypoints jQuery plugin to add animation to a series of images as a user scrolls over them. My goal is to apply certain CSS properties - opacity:1, filter:grayscale(0), -webkit-filter:grayscale(0), and -moz-filter:grayscale ...

jquerycssjquery-waypoints

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

How can I use SQLite in HTML5 to execute a call like the one below, so that the result is returned immediately rather than passed off to another function? try { mydb.transaction( function(transaction) { transaction.executeSql( &apo ...

javascriptsqlitehtml

Creating fixed or absolute position tooltips for iPhones and iPads: A step-by-step guide

I've been enjoying using the qTip jQuery plugin for some time now and haven't experienced any issues. However, I recently noticed a bug with the tooltips on iPads and iPhones. Here are the symptoms I've observed: Everything works fine unt ...

jqueryiphonecssipadqtip

Tips for implementing a scrolling renderer in ThreeJS?

I'm currently utilizing the OrtographicCamera. Within the HTML, a canvas is declared and then passed to the renderer like this: var canvas = document.getElementById("canvas") var width = canvas.clientWidth; var height = canvas.clientHeight; render ...

htmlcssscrollthree.jsrenderer

Discovering the power of jQuery: Calculating values based on selections from a multi-select dropdown and textbox

I need help with a HTML form that includes: 1 multi-select dropdown: Users select the name of an employee. 1 Textbox: Users input the total price. After entering the total price in the textbox, a small calculation sh ...

jqueryhtml