Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line.

Take a look at my code:

<div class="col-md-12">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Left Division
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Right Division
    </div>
  </div>
</div>

This layout is responsive up to 574px, but when the browser size is reduced below that, the divisions appear on two separate rows. My goal is to have them on the same line (left & right)

https://i.sstatic.net/wD6gc.png

Please refer to the image linked above to see the issue.

csstwitter-bootstrapbootstrap-4responsive

Answer №1

To ensure consistent column division across all screens, you can utilize the col class.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col bg-success">
          Left Div
        </div>
        <div class="col bg-warning">
          Right Div
        </div>
    </div>
  </div>
</div>

The classes bg-success and bg-warning only serve as color indicators.

Answer №2

<div class="col-12 ">
  <div class="row">
    <div class="col-6">
      Content on the left side
    </div>
    <div class="col-6">
      Content on the right side
    </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

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

htmlcssbootstrap-4

Is there a way to implement word wrapping in li text without making any changes to its width

Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...

javascripthtmljquerycss

Take away the follow option on the embedded tweet

I need to customize the appearance of embedded tweets on a website by removing the follow button as well as the reply, favorite, and retweet buttons in the footer. Here is a simple HTML example: <blockquote class="twitter-tweet"> <a href="htt ...

jqueryhtmlcsstwitter

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px? Take a look at this JSfiddle for reference. HTML: <table> <tr> <td class="fixed-width">Fixed width col ...

htmlcsshtml-table

Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...

htmlcssreactjsmaterial-ui

I am uncertain as to why `Justify-Between` insists on aligning everything at the start of the container

While utilizing tailwind css, I am encountering a problem where my justify-between behaves like justify-start. However, when I switch to using justify-end, it aligns everything to the end of the container. I would appreciate it if someone could point out ...

cssreactjsnext.jstailwind-css

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution. The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 e ...

javascripthtmlcss

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

javascripthtmlcssuser-interface

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

Assistance needed for Internet Explorer

When I designed a webpage in Firefox, everything looked great. However, when I opened it in Internet Explorer and resized the window to less than maximum size, half of the main div disappeared under the footer. If you want to see the issue for yourself, v ...

htmlcssinternet-explorerfirefox

Dash: Streamlining the process of updating numerous elements within a callback

I am facing a challenge with my Dash app where I have multiple html.Div components that all look and are laid out similarly. When I click on a checkbox, I want all of these elements to be hidden. The common solution suggested is to create multiple outputs ...

pythonhtmlcssplotly-dashdashboard

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

I'm in the process of implementing sticky navigation on my website that will dynamically change as users scroll through different sections. Specifically, when scrolling over a section marked with the class .dark, I want the logo and text color to swit ...

javascripthtmlcss

Bug with the button and text input feature in Firefox

I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...

htmlcssfirefoxbuttoninput

The mysterious case of the vanishing close button on Curator.io's mobile

Currently, I am using curator.io aggregator to showcase my Instagram feed on the website. An issue arises when switching to mobile view as the close button (class="crt-close") disappears. You can see an example of this here: To replicate the pr ...

javascripthtmlcss

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly. However, as the num ...

javascripthtmlcss