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

What alternative to tables can I utilize that possesses similar attributes?

I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...

htmlcsshtml-table

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

csslistcss-float

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: My version currently looks like this: To achieve this, I hav ...

htmlcss

unable to reset contact form functionality

I need to implement a Contact Us form on my website. The form should clear the text fields after submission and display a Thank You message. Below is the HTML code: <div class="form"> <div id="sendmessage">Your message has been sent. Thank yo ...

javascriptphpajaxhtml

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

phphtmlmagentoattributesmagento-1.9

Add a specific section of a bower/npm package. For instance, include only the bootstrap grid

Can I selectively install parts of a dependency package, such as only the bootstrap-grid component instead of the entire Bootstrap framework (as offered in Bootstrap's customizable downloads), through npm, bower, or another dependency manager? ...

twitter-bootstrapnpmbower

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

javascriptphpjqueryhtmlajax

Ways to create CSS styles dynamically in PHP using database-driven methods

Currently, I am in the process of developing an application that gives users the ability to select different style options within the app. These choices will then be utilized to create a dynamic web page. I am curious about the various methods available to ...

phpcssstylesheet

Incorporating an image as a clickable element instead of a traditional button using HTML and

Here's the issue at hand: I currently have "+" and "-" icons at the end of each row to add and delete rows as needed. However, I would like to replace the "-" icon with a trashcan symbol instead. I attempted to do this by replacing it with an image s ...

javascriptjqueryhtmlcssgrails

Making the most of Material Design icons in MaterializeCSS: A step-by-step guide

I am looking to customize my mdi icons by adding my own set of icons into custom classes. The existing mdi classes do not match my requirements. Is there a way for me to add these icons and use them just like the default ones? <i class="mdi-image-face ...

cssmaterial-designmaterialize

Creating a striking two-tone border pattern in an HTML document

Looking to create a design with a straight line that features two colors and a slanted line in between. Here is an example of the desired result: https://i.stack.imgur.com/9ys6e.png ...

htmlcss

When the browser is resized, elements do not change position

I am attempting to build a website with solely horizontal scrolling. Check out this demo for reference. My issue arises when I resize the browser, as the content (paragraph within the light yellow box) fails to reposition itself. Ideally, I would like that ...

htmlcsspositioningcss-positionhorizontal-scrolling

Difficulties encountered with CSS transitions when using the background

I stumbled upon some interesting examples on Stack Overflow about the fade effect on link hover. Curious, I decided to try it out myself and created this JSFiddle. <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-tran ...

htmlcssfirefoxcss-transitions

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

Employing conditional statements in conjunction with styled components

Is there a way to style my PaymentBtn with the main styled Button but only apply the hover effect when the isLoading prop is activated, without changing anything else? I want the styling to remain the same except for the hover effect. Basic button export ...

cssreactjsstyled-components

What is the best way to align the menu to the center

Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly. <div id="menuwrapper"> <ul class="menu" id="menu"> <li><a href="#" >Home</ ...

htmlcssmenu

Navigating a Multi-Page Website with Sleek Scrolling

I've been searching for a solution everywhere but haven't had any luck. I'm trying to implement a smooth scroll effect that works seamlessly across multiple pages. For instance, the smooth scroll effect is present on the homepage with naviga ...

javascriptjqueryhtmlnavigationsmooth-scrolling

Utilize the display flex property within a nested flex container

I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as ...

cssflexbox

The base_url is duplicating the base address, causing an issue with loading the bootstrap CSS file

Recently started working with CodeIgniter and I'm trying to load Bootstrap CSS files using the base_url() function. I've searched for solutions on Stack Overflow, but haven't been able to resolve the issue. The name of my view file is artic ...

phptwitter-bootstrapcodeigniter

How can the table header be displayed in a Vue JS application after receiving the server response?

On my Vue.JS web page, I am making an API call using the Http GET method. Currently, the table header is displayed before receiving the API response, which doesn't look good. Can someone help me modify my code so that the table header is only displaye ...

htmlcssvue.jshtml-tablevuejs3