Challenges with resizing in Bootstrap

I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other login options.

My current page layout looks like this:

container
  row
    col-sm-6
    col-sm-6

The issue arises because the modal's width is set to around 600 pixels, causing the login page to become "responsive" and stack the col-sm-6 elements on top of each other instead of next to each other.

I have tried adjusting the container width using media queries like this:

@media (min-width: 768px) {
      .container {
        width: 550px;
      }
    }

However, this solution did not work for me. Do you have any other ideas or suggestions? Any help would be greatly appreciated.

htmlcsstwitter-bootstrap

Answer №1

When designing for a screen with 600 pixels width, it falls under the category of xs device. To adapt your layout accordingly, you can use the following structure:

container
  row
    col-xs-6
    col-xs-6

If you are unfamiliar with different device sizes, you can learn more here. It is also possible to apply multiple grid classes to each div, and the layout will adjust based on the device size.

For example:

<div class="col-xs-6 col-sm-12">
</div>
<div class="col-xs-6 col-sm-12">
</div>

The code above demonstrates how two columns would appear side by side on an xs device, but stacked on an sm device.

Answer №2

It is recommended to utilize inline form elements

<form class="inline-form" role="application">

</form>

Answer №3

Experiment with a mix of different classes:

for example 

.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6

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

Ways to emphasize the index navigation link when on the main page

Currently, there is a web design project that I am tackling and have encountered a slight hiccup that needs resolving. The issue revolves around highlighting different navigation links based on the URL of the current page. This functionality works seamless ...

javascriptjqueryhtmlcssnav

How can you determine if a DIV element is within view in HTML (without being overflowed)?

Is there a way to determine if a DIV is within its container and therefore visible? In this scenario, the active button (highlighted) can be seen because it is contained within the boundaries: However, in this case: The active button cannot be viewed as ...

htmlcss

Execute with jQuery using Multiple Attribute Selector

I am attempting to input numeric values using a keyboard. My issue is as follows: the keyboard has an "Accept" button, and I have multiple text fields. I want to assign a different action for each text field. I attempted to use multiple attribute selector ...

javascriptjquerycssjquery-uikeyboard

Scrolling automatically

I'm experimenting with creating a typing effect using JavaScript and the typed.js library, found here: My approach involves using a div as a container. However, I've encountered an issue - when the text reaches the height of the div, scroll bars ...

javascriptjqueryhtmlcss

Creating a handshake process for hybi-17

I am currently in the process of creating the handshake for the websocket hybi-17 protocol. I have been referencing the draft available at . Based on the guidelines provided in the draft, I have developed the following code snippets for both the client (us ...

phphtmlwebsocket

Make sure that your inline-block elements are aligned with both the left and right edges of their

Explaining what I'm attempting can be a bit tricky, but I'll do my best. I have X number of categories that I need to organize. Each category needs to be enclosed in a box with a grey border. I want the category boxes to be displayed "inline-bl ...

htmlcss

Obtain the Vertical Dimension of an HTML Element using

Recently, I developed a unique modal message window for my application. However, I am facing an issue in determining the height of the container that is inserted into the overlay. function load_custom_message(title, message) { var left = (($(window).wi ...

jqueryhtmlheight

Make the header background color shift as the page is scrolled down on the fixed header

I am currently using a sticky transparent header on my website www.obviagency.com Here is the CSS code: #site-header-inner { height:0px; z-index:170; margin:0 auto; width:100%; position:fixed; top:0; margin-top:10px; } I would like to change the backgr ...

csscolorsheadertransparentsticky

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

jQuery: Locate and eliminate any images in the text that appear after a specific group of tags if no images are present

Currently, I am in the process of developing a feed reader specifically designed to parse the Google News Feed. You can view and test the code on this Fiddle. My main challenge lies in removing titles and sources from the descriptions. Through my explorati ...

javascriptjqueryhtmljsonrss

Find out the dimension of an object's width

I have a container that I want to slide in and out of view on the screen when a button is clicked. The challenge is that I do not want to set a specific width for the container as it may vary in size. I attempted to achieve this with the following code, ...

jqueryhtml

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

jqueryhtmlcsscordova

Can you explain the purpose of the search_/> tag used in this HTML code?

I came across this code snippet while working on creating a customized new tab page for Firefox. <input class="searchBar search_google" type="text" name="q" placeholder="Google" search_/> However, I'm confused about the search_ ...

htmlformssearchwebinput

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

htmlcssonclick

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...

jquerycsslistmenu

Excessive white space on WordPress pages is creating a less than ideal

On my WordPress page, I have set up a row with the main side at span10 and the right sidebar at span2. However, the layout leaves too much blank space, causing users to scroll to the right and see nothing. You can view the specific page here Below is the ...

htmlwordpresstwitter-bootstrapbootstrap-4

How to prevent v-menu from overlapping a navbar in Vue.js

Exploring the examples on the main page of Vuetify, we come across the v-menu component showcased in detail. Check it out here: https://vuetifyjs.com/en/components/menus/#accessibility If you activate any of the buttons to open the v-menu and then scroll ...

javascriptcssvue.jsvuetify.js

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

Develop and arrange badge components using Material UI

I'm new to material ui and I want to design colored rounded squares with a letter inside placed on a card component, similar to the image below. https://i.stack.imgur.com/fmdi4.png As shown in the example, the colored square with "A" acts as a badge ...

javascriptcssreactjsmaterial-ui