Learn how to use Bootstrap to position my component below another component on the webpage

Understanding the basics of Bootstrap and how to assign sizes to columns is one thing, but I seem to be stuck on a simple use case.

Here is the scenario:

I have two components for a Todo list application:

  • Component 'New Todo' (Form Input field)
  • Component 'Todo List' (Table List)

On large screens, I want the 'New Todo' component to take up half of the screen on the right, while the 'Todo List' component occupies the other half on the left.

However, on small (mobile) screens, the 'New Todo' component should appear on top with the 'Todo List' component positioned below it.

As an additional question: How can I make the 'New Todo' input field collapsible on small mobile screens?

javascriptbootstrap-5

Answer №1

Absolutely no need for Bootstrap in this scenario. Simply wrap the two components in a display:flex container and adjust the order property using a media query for mobile devices.

However, if you insist on using Bootstrap, you can refer to the Bootstrap flex utilities link provided here.

.container {
  display: flex;
}

.new-todo,
.todo-list {
  background-color: red;
  padding: 5px;
  flex: 50%
}

@media (max-width:480px) {
  .container {
    flex-wrap: wrap;
  }
  .new-todo,
  .todo-list {
    flex: 100%
  }
  .new-todo {
    order: 1
  }
  .todo-list {
    order: 2
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="todo-list">todo-list</div>
  <div class="new-todo">new-todo</div>
</div>


Using Bootstrap:<br>

<div class="row flex-wrap flex-lg-nowrap">
  <div class="col-12 col-lg-6 order-2 order-lg-1">todo-list</div>
  <div class="col-12 col-lg-6 order-1 order-lg-2">new-todo</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

Transforming Observable into a Promise

Is it considered a best practice to convert an observable object to a promise, given that observables can be used in most scenarios instead of promises? I recently started learning Angular and came across the following code snippet in a new project using ...

javascriptangularpromiseobservable

Stop accidental form submissions on iOS devices by disabling the return button

In my Ionic 3 application running on iOS, I encountered a bug that allows users to submit a form even when the submit button is disabled. Despite trying different solutions from this source, I have not been successful in resolving it. To prevent accidenta ...

javascriptiosangularionic-frameworkionic3

Optimal method for file uploading with Node.js

How can I effectively manage file uploads in node js? I would like users to be able to upload profile images with the following specifications: -Validated size of at least 200 * 200 -Accepted file formats are png, jpg, jpeg, or gif -Additional functi ...

javascriptnode.jsexpressupload

Populate Jquery datatables programmatically

After implementing the Jquery Datatables plugin, I initially had hardcoded content in the table. However, I made some modifications to dynamically populate the table with fetched data. While this change worked fine, I encountered issues with the search f ...

javascriptjquerydatatable

Focus automatically on an input component when the value in the Vuex store is updated in Vue

Here's the code snippet from my component: //template <v-select ref='ItemSearchSelect' :options="options"></v-select> ... //script created: function () { this.$store.subscribe((setFocusSearch, state) => { ...

javascriptvue.jsvuex

How can selenium be best utilized in a production environment?

After creating tests for my website using selenium and javascript, I am now looking to implement them in a production environment. Currently, I have been running these tests locally with the Chrome driver. In the start section of my package.json, I execu ...

javascriptnode.jsreactjsseleniumtesting

The checkbox will be automatically checked whenever there is any modification in the textbox

I'm currently working on a Grid view with a checkbox and two textboxes. What I want is for the checkbox to be automatically checked whenever there is a change in one of the textbox values, for example switching from 0 to 1. This project is being devel ...

javascriptjqueryasp.netcheckboxtextbox

Update information in a table row and store it in the database using Ajax

Looking for some guidance with ajax and javascript here. I'm not very proficient in this area, so any help would be greatly appreciated. I have a table on my page where data is displayed like this: <table class="table table-bordered"> ...

javascriptphpjqueryajax

How can we extract word array in Python that works like CryptoJS.enc.Hex.parse(hash)?

Is there a method in Python to convert a hash into a word array similar to how it's done in JavaScript? In JavaScript using CryptoJS, you can achieve this by using: CryptoJS.enc.Hex.parse(hash), which will provide the word array. I've searched ...

javascriptpythonnode.jshmaccryptojs

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

Having trouble with the GitHub publish action as it is unable to locate the package.json file in the root directory, even though it exists. Struggling to publish my node package using this

I've been struggling to set up a publish.yml file for my project. I want it so that when I push to the main branch, the package is published on both npm and GitHub packages. However, I am facing difficulties in achieving this. Here is the content of ...

javascriptnode.jsnpmgithub-actionspackage.json

Vue 3 - Compelled to utilize any data type with computedRef

Recently, I've been diving into Vue/Typescript and encountered a puzzling error. The issue revolves around a class named UploadableFile: export class UploadableFile { file: File; dimensions: Ref; price: ComputedRef<number>; ... constr ...

javascripttypescriptvuejs3

Error: Document's _id field cannot be modified

I am new to both MongoDB and Backbone, and I find it challenging to grasp the concepts. My main issue revolves around manipulating attributes in Backbone.Model to efficiently use only the necessary data in Views. Specifically, I have a model: window.User ...

javascriptmongodbbackbone.jsexpress

What steps should I take to create an object that can be converted into a JSON schema like the one shown here?

I'm facing a rather simple issue, but I believe there's something crucial that I'm overlooking. My objective is to iterate through and add elements to an object in order to generate a JSON structure similar to the following: { "user1": ...

javascriptjsonangulardata-structures

Fill out a Form in a separate Tab multiple times

I'm currently developing a straightforward form for distributing a newsletter: <form method="post" id="newsletter_form" action=""> <label for="subject">Newsletter Subject:</label><br/> <input type="text" nam ...

javascriptjqueryformssubmit

Struggling to display a collection of items in React

Below is the code snippet : import React, { Component } from 'react'; import axios from 'axios'; import _ from 'lodash'; import Loader from './Loader'; export default class Main extends Component { constructor(p ...

javascriptreactjsrender

"An issue with preventing default behavior when clicking on a jQuery element

I need some assistance preventing a JQuery onclick function from scrolling the page to the top. I have tried using preventDefault() without success. You can find the code on this website: Below is the code snippet that I am currently using: $( document ...

javascriptjqueryhtml

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

javascriptangularlifecycleeventemitter

Having trouble with fs.readFile in Node.JS on Ubuntu?

Currently, I am facing an issue when trying to read XML files. Strangely, the code works flawlessly on my personal computer running OS X. However, when I run the same code on a DigitalOcean Ubuntu 16 Server, it fails to produce any results. I am utilizing ...

javascriptnode.jsubuntureadfilefs

I am experiencing difficulties in accessing the DOM

I have implemented jQuery $.ajax to dynamically load data into table rows as shown below: <table id='row-data'> <tr><td>1001</td></tr> <tr><td>1322</td></tr> <tr><td>15 ...

javascriptjqueryajaxeventsjquery-events