Tips for arranging two divs from a single column to display side by side on smaller screens instead of stacked on top of each other

My knowledge of CSS, HTML, and bootstrap is quite limited.

I'm trying to figure out how to split a single column on a large screen into two columns on a smaller screen so that the content in two divs appears side by side instead of stacked on top of each other when resizing the window.

<div class= "container-fluid">
 <div class ="row">
  <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12"> 
   <canvas width="800" height="450">

   </canvas>
  </div>

  <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
   <div id="Pseudo">

   </div>
   <div id="Element">

   </div>
  </div>
 </div>
</div>

I aim to have the Pseudo and Element divs displayed next to each other on smaller devices and stacked on top of each other on larger screens. It's currently working fine on larger screens.

I've been attempting to achieve this using bootstrap without success. Any guidance would be appreciated as I've been struggling with it for some time now.

htmlcssbootstrap-4

Answer №1

In order to achieve the desired result, it is important to define single columns for each element instead of defining the external column for both. Here is an example that might help:

#Pseudo {
  background-color: red;
}

#Element {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class= "container-fluid">
 <div class ="row">
  <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-9 "> 
   <canvas width="800" height="450">
   </canvas>
  </div>

  <div class="col-xl-9 col-lg-3 col-md-12 col-sm-12 col-3">
    <div class="row">
     <div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Pseudo">
      x
     </div>
     <div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Element">
      y
     </div>
   </div>
  </div>
 </div>
</div>

Answer №2

Your current code lacks the necessary elements to make the Pseudo and Element divs dynamic.

Interestingly, your approach aligns with the correct perspective:

   <canvas width="800" height="450">
   </canvas>

as well as

   <div id="Pseudo">
   </div>
   <div id="Element">
   </div>

These components are dynamic. Therefore, you should apply a similar strategy to these divs.

You can achieve this by:

<div class ="row">

<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
   <div id="Pseudo">
   </div>
</div>

<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
   <div id="Element">
   </div>
</div>

</div>

Bootstrap supports nested rows, so you do not need to be concerned about the others.

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

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

javascripthtml

What could be causing the dropdown menu to malfunction on certain pages?

A few days ago, I attempted to learn Django and create a simple website using it. However, for some reason, the dropdown on the homepage was not functioning properly. Oddly enough, on another page, the dropdown worked perfectly fine. Here is the HTML templ ...

pythonhtmlpython-3.xdjangodrop-down-menu

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

What steps should I take to create this animation?

So here's my concept: I envision a circle div positioned in the center with multiple small lines extending outwards, resembling rays of sunlight. How should I go about achieving this effect? Would implementing JavaScript or utilizing CSS3 animations b ...

javascripthtmlcssanimation

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

Tips for resolving the Firefox display problem with input[type="file"] using CSS

After researching articles, it became clear to me that input[type="file"] displays differently across various web browsers. I am in need of a simple solution using only CSS to address this issue as I only require adjusting the width of the element. The w ...

htmlcss

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

cssreactjsreact-routermaterial-ui

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Add the variable's value to the input field

It is necessary for me to concatenate a numeric value, stored in a variable, with the input fields. For example: var number = 5; var text = $("#dropdown_id").val(); I wish to append the value of the variable 'number' to 'dropdown_id' ...

javascriptjqueryhtml

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

javascriptjquerycss

Can a complete form be encapsulated within a single AngularJS directive?

While I have come across several instances of individuals utilizing a blend of HTML and directives to craft an AngularJS form (as seen here), my goal is to develop a self-contained widget. This widget would encompass all the necessary HTML for the form w ...

javascripthtmlangularjsforms

What is the best way to make the background color of section 1/2 cover the entire screen?

Is there a way to make the background color of section 1/2 fill the entire screen? Check out this link for more information. <div id="sections"> <div class="section one"> <a href="#section two"> <i class="fa fa-an ...

css

Using window.open and appending a new feature to it

Below is the code found in my index.html file: <!DOCTYPE html> <html> <head> <script> function createDialogBox() { var dialogBox = window.open("in1.html"); dialogBox.nameBox= "my little box" } window.onload = createDialogBox; wind ...

javascriptjqueryhtmldom

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example https://i.sstatic.net/w84xS.png Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here https://i.sstatic.net/yqnbJ.png You may notice a difference ...

csshtmlfont-awesome

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

ExpressJS and EJS are my chosen technologies for creating Views. When it comes to the navigation bar, I want to add a class="active" to the links that represent the current page. However, if I use partials in my views, how can I achieve this? Here is a q ...

cssnode.jstwitter-bootstrapexpressejs

Tips for enabling resize functionality on individual components one at a time

Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...

javascriptjqueryhtmlcss

What is the best way to resize an HTML element to fill the remaining height?

I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...

htmlcsslayoutnode-webkit

Tips for embedding HTML content onto a clipboard for easy pasting into Gmail

Our application generates two URLs that users often want to copy and paste into Gmail. To make these links more visually appealing than the lengthy URLs, we implemented HTML code. We included a feature that places the HTML on the Windows clipboard for easy ...

htmlgmail

Firefox MediaSourceExtension now has enhanced mp3 support

Currently exploring the integration of adaptive and progressive audio streaming in the browser without the need for plugins. MSE is the HTML5 API that I've been anticipating, now available in FF 42. However, I'm encountering issues with audio fo ...

javascripthtmlaudiomp3media-source

Apply a class using [ngClass] based on an HTML condition within the local scope

In the past, I have utilized [ngClass] to assign classes based on the Boolean value of a variable in the JavaScript/TypeScript. However, I am now curious if it is achievable to apply [ngClass] based on a local HTML boolean value instead? For example: < ...

htmlcssangularanimation