Custom Bootstrap design layout where the right column wraps under the left column

Need assistance with my bootstrap layout.

Prior to the 980px breakpoint, the right column wraps under the left column. I want it to remain in its position without wrapping.

The challenge is ensuring the left column has a fixed width while allowing the right column to adjust its width based on the elements within the form, preventing overlap when the browser viewport is resized. The horizontal form contains multiple elements on the same line (some omitted for brevity).

I suspect the col sizes of my form-group elements are incorrect...

If possible, please make adjustments in this CodePen: http://codepen.io/krystyna93/pen/GZzqrq 


            <!-- CSS Snippet -->
        

            <!-- HTML Form Structure -->
htmlcsstwitter-bootstrap

Answer №1

body {   
background-color: #ccc;
}

/* Unique Container Styles */
.container { background-color: #bbb; font-family: arial, verdana, sans-serif; width: 1530px; margin: 0 auto; }

/* Responsive Design Changes */
@media and screen (max-width: 1590px) {
.container {width: auto;}
}
@media and screen (min-width: 981px) and (max-width: 1530px){
      .accordion.sidebar {width: 230px;
            }
}

        @media and screen(max-width: 980px) {
         
            
        }

.col-md-10{ border-left: 1px solid #4d4d4d; padding: 0; margin: 0;}
.container .row.header{ color: #fff; border-bottom: 6px solid #fff }
.container .row.header h1 { padding: 30px 0; font-size: 3.5em;  font-weight: 300; }

h2 { color: #fff; font-size: 32px; }
h3 {color: #ccc; font-size: 30px; padding-bottom: 10px; } 
h3.inner { padding-left: 15px;}
h4 {color: #ccc; font-size: 22px; }

.headers { border-top: 1px solid #ccc; margin-top: 50px; margin-bottom:30px;}
.headers h1 { padding: 20px 0 0 0; }
.headers p {font-size: 1.6em; color: #fff; padding: 0 0 10px 0; margin: 0;}

/* Sidebar Navigation Styling Updates */
.accordion.sidebar { padding: 0; background-color: #fff;}
.panel {border-radius: 0 !important; border: 0; font-family: 'Lato', Arial, sans-serif; font-weight: 400}
.panel-group {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}

.panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-weight: bold; font-size: 20px}
.panel-heading h4.panel-title a:active {color: #fff }
.panel-heading h4.panel-title a:hover {color: #FF5500}

...

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

Tips for integrating WMV files into an HTML5 document

I've been attempting to integrate some s3 WMV file URLs into my HTML page, but the following code doesn't seem to be functioning as expected. <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Microsoft® Windows® ...

htmlangularjs

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

htmlcss

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

Create a grid layout using Bootstrap and Vue that features responsive columns which resemble a snake pattern. The alternate rows should be displayed in reverse order for a visually dynamic

Having a bit of a tricky situation here, hoping someone can provide some insight. I am currently working on a project using Laravel, Vue, and Bootstrap where I need to loop through some objects and display them in a specific pattern. 1 2 3 6 5 4 7 8 9 Th ...

twitter-bootstrapvue.jslayout

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

jquerycsscss-transforms

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

Is there a method to incorporate links or buttons when hovering over a row in a kendo grid? I've searched through the documentation and looked online, but haven't found a solution. I'm considering if I should modify my row template to displa ...

javascripthtmlkendo-ui

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...

htmlcssangularjsselectdrop-down-menu

Launching a web application directly from a USB drive

Exploring the world of Javascript frameworks and nodejs, I recently encountered a unique requirement that got me thinking about their practical application. The requirements are as follows: --I need to create a lightweight website that can be run from a U ...

javascriptnode.jstwitter-bootstrapframeworksexpress

Should comments come before <!DOCTYPE HTML>?

When organizing my files, I always start with a comment about the content. However, I've been told that it's not recommended to put anything before the declaration. Is it acceptable to include comments before this or should I reserve the top of m ...

htmlcomments

When navigating using links in NodeJS+Express, I am unable to load the CSS files

I am a beginner with Node.js. Below is the code I used to make the server run in index.js: var express = require('express'), views = require('./routes/views'); var app = express(); // Get an instance of router //var router = ex ...

node.jstwitter-bootstrapexpress

What method can be used to eliminate the shadow of a container when rotating a div?

I am currently working on creating a dynamic card that expands and reveals additional information upon mouse rollover. The challenge I am facing is that the shadow effect remains visible when flipping the card, which disrupts the overall desired effect. H ...

csshtmlcontainersshadow

Creating a new object store in IndexedDB on Windows 8

Encountering issues with creating an object store in IndexedDb while trying to build a Metro app using Javascript. The code snippet below shows my attempt within the 'dbReq.onsuccess' function that is supposed to create the object store upon succ ...

javascripthtmlwindows-8windows-runtime

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

javascripthtmlhtml5-audioweb-audio-api

Issues with 'floating' unordered lists

.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...

css

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

Prevent PHP from redirecting during an HTML file upload

Is there a way to prevent the page from redirecting to the upload php file when the upload button is clicked? I'm looking for a solution within the code below. <form id="myForm" action="http://example/DB_1/AccessWeb/file_upload.php" method="post ...

phphtml