Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the blue box shifts below them, as demonstrated in this image:

https://i.sstatic.net/7t5jV.png

Although I am new to utilizing the bootstrap4 column layout, I have been trying to achieve this functionality without much success so far. Here is the code snippet for my current work in progress:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<div class="container">
    <div class="row">
        <div style="background:red" class="col-md-3">
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          
        </div>
        <div style="background:green" class="col-md-3">
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          
        </div>
        <div style="background:blue" class="col-md-3">
          TEXT3 <br>
          TEXT3 <br>
          TEXT3 <br>
        </div>
      </div>
</div>

I would greatly appreciate any assistance. Thank you!

javascripthtmlcssbootstrap-4responsive-design

Answer №1

Incorporating multiple col-* classes into your elements allows you to specify various layouts for different screen sizes simultaneously.

For instance, on smaller screens, you might require 2 columns next to each other and one full-width column. Bootstrap follows a mobile-first approach, so begin with the smaller layouts and progress to larger ones. The smallest screen columns are designated by col-* (without specifying sm, md, etc).

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

The two columns will each occupy half the width from the smallest to the largest screen size. The third div will take up the full width. To add complexity to your layout, you can include classes in the elements to make them one-third of the row width on larger screens.

<div class="col-6 col-md-4"></div>
<div class="col-6 col-md-4"></div>
<div class="col-md-4"></div>

These three columns will be placed in a single row on larger screens, each occupying one-third of the width to fit together. Note that col-12 has been omitted because col-md-4 implies the usage of col-12 when the screen is smaller than its breakpoint.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div style="background:red" class="col-6 col-md-4">
      TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br>

    </div>
    <div style="background:green" class="col-6 col-md-4">
      TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br>

    </div>
    <div style="background:blue" class="col-md-3">
      TEXT3 <br> TEXT3 <br> TEXT3 <br>
    </div>
  </div>
</div>

If you have any inquiries, feel free to leave a comment below.

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

Establishing a boundary by incorporating a variable into a numerical value

Is there a way to adjust the margin-bottom of an element based on the height of the next() element plus 12px? I attempted the code below but it didn't yield the desired results. $("div.entry-content").css("margin-bottom", $(this).next().outerHeight() ...

jquerycssheight

How can we improve the resizing of images for smaller screens?

Don't let the title fool you. Check out this code: #headerimg { background: url('http://artotek.fi/css/images/artoteklogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border-bottom: solid ...

htmlcss

Searching for a specific element within a JSON object by iterating through it with JavaScript

Here is the JSON file I am working with: { "src": "Dvc", "rte": { "src": "dvc" }, "msgTyp": "dvc.act", "srcTyp": "dvc.act", "cntxt": "", "obj": { "clbcks": [ { "type": "", "title": "", "fields": [ { "src": "label.PNG", ...

javascriptjson

Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors. My goal is to assign the same background color to tags with id ...

javascriptstringtypescriptcolors

Using JSP in combination with JavaScript for creating dynamic templates

Implementing server-side HTML templating with JSP + JSTL allows for the generation of tables containing user data: <body> ... <table> <c:forEach items="${users}" var="user"> <tr> <td>${user ...

javascriptajaxtemplatesjsp

What could be the reason for the discrepancy between the values displayed in the two alerts? What is causing this difference in

Check out this JavaScript code snippet: var x = 3; var foo = { x: 2, baz: { x: 1, bar: function() { return this.x; } } } var go = foo.baz.bar; alert(go()); alert(foo.baz.bar()); When you run the two alert functions here, you&ap ...

javascriptfunctionoopobjectscope

Creating a peaceful web platform with React that supports several user roles

I am in the process of developing a single-page web application that must be completely restful, which is new territory for me. One challenge I'm facing is determining how to efficiently render the user interface for different roles using React. With ...

javascriptrestexpressreactjsreact-router

Guide on wrapping text within a pie chart using d3 version 7.6.1 in conjunction with TypeScript

When attempting to create a pie chart, I came across two examples: one here https://bl.ocks.org/mbostock/7555321 and another here https://jsfiddle.net/05nezv4q/20/ which includes text. However, I'm working with TypeScript and D3 v7.6.1 and encounterin ...

javascriptreactjstypescriptd3.js

I encountered a crash in my app because of an error in my Node.js backend code that was posting the accessories and slug into the database

My node.js backend code is responsible for adding the accessory and slug to the database, but I am encountering app crashes. const express=require('express'); const Category = require("../models/Category"); const slugify=require('s ...

javascriptnode.jsreactjsmongodb

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

I am facing an issue with my Vue components 'Parent' and 'Child'. Each child component has a checkbox with a :checked prop. In the Parent component, I iterate through an array of objects and pass props to the child. Although I can emit ...

javascriptvue.jscheckboxnested-loopsv-for

I am in need of creating a specialized Gulp task that can effectively strip out attributes from my HTML code

I am in need of a Gulp task that can iterate through all specified HTML documents and eliminate specific attributes (such as style=""). I initially attempted to accomplish this task the same way I would do it via the browser, but it seems that's not p ...

javascriptnpmgulp

Ensuring validity using dynamic context objects within Joi

I need to implement a dynamic validation system that involves downloading an object at runtime and saving it as a well-formed .json file. The objective is to use the values from this downloaded object as part of a validation process using Joi.validate wi ...

javascriptjsonvalidationschemajoi

Transforming the output from a processor into an array structure

Being a newcomer in the field of development, I have a question about how to retrieve data based on my requirements and what is considered the best practice? This is the structure of my design: JavaScript (Ajax call) >> ashx handler (Access databa ...

c#javascriptjqueryasp.net

External variable accessing the getjson function

I have a question about optimizing the usage of the title variable within the getJSON function. Here's a sample code snippet that I'm working with: for (var x = 0; x < temp_addresses.length; x++) { var title = temp_addresses[x].title; ...

javascriptjqueryajaxjsongetjson

Multiple requests are being sent via AJAX

Despite numerous other posts addressing the same issue, I have not been able to find a solution for my problem. The AJAX request appears to be sent multiple times. var checkAllStatus = function () { $.ajax({ cache: false, type: "POST", ...

javascriptjqueryajax

Consumer using ActiveMQ-Stomp is not receiving any messages

I attempted to create a JavaScript code for an ActiveMQ subscriber that would subscribe to a specific topic, but unfortunately I am not receiving any messages after establishing the connection. The topic that needs to be subscribed to is COO.2552270450083 ...

javascriptwebsocketactivemq-classicpublish-subscribe

Is a 'Virtual DOM' included in React Native's architecture?

According to the ReactJS wiki page on Virtual DOM: React uses an in-memory cache of data structures to efficiently compute differences and update the displayed DOM in the browser. This allows developers to write code as if the entire page is re-rendered ...

javascriptreactjsreact-nativevirtual-domreact-fiber

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired

Sorting Angular components in reverse alphabetical order from A to Z

I feel like the answer to this problem is staring me right in the face, but no matter how hard I look, I just can't seem to find it. When dealing with a large ng-repeat, I have multiple sort options that I pass as an array. The user has the ability t ...

javascriptangularjssorting

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

javascriptphpjqueryhtml