Achieving the ideal HTML layout for small screens that differs from larger screens is a common challenge faced by web developers

After implementing the markup code, I achieved the desired layout on large screens. However, when reducing the screen size to a phone level, I require a layout similar to image-3, and on larger screens like laptops, it should resemble image-1. Image-1 and Image-3 are references to a single linked image.

I am utilizing Bootstrap-4 and HTML-5 for this task.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
                <div class="container-fluid">
                  <h6>Image-1 in large screens like laptop</h6>
                  <div class="row">
                    <div class="col-sm-8 ">

                      <div class=" card">
                        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
                      <div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
                    </div>
                  </div>
                </div>

https://i.sstatic.net/a0yUK.jpg

This image illustrates the desired layout.

htmlcssbootstrap-4

Answer №1

Utilize the responsive grid classes to modify the layout according to specific breakpoints.

An instance would be using col-12 col-md-8, which indicates being 8 columns wide on md screen size and larger, and 12 columns wide on md screen size and smaller:

<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-12 col-md-8">
      <div class=" card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="row h-100">
        <div class="col-6 col-md-12">
          <div class="card h-100">
            <button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
          </div>
        </div>
        <div class="col-6 col-md-12">
          <div class="card h-100">
            <button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Here is a code snippet that you can try out:

<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-lg-8 col-sm-12">
      <div class="card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6">
          <div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
        </div>
        <div class="col-md-12 col-sm-6">
          <div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
        </div>
      </div>
    </div>
  </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 choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

htmlcsstwitter-bootstrapbackgroundopacity

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

htmlcssxmlgoogle-chromesvg

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. https://i.sstatic.net/NdAUB ...

htmlcss

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

Unable to show the input's value

Need help in taking user input to display calculated values //html <div class="empty"> <h5> Enter Empty Seats </h5> <ion-item> <ion-input placeholder="Enter Number of Empties.." type="number" name="emptySeats" [( ...

javascripthtmltypescriptionic-framework

Using Bootstrap to horizontally align cards in a single row

When rendering the 4 items in a row using a for loop, I encounter an issue where the first line renders 4 items correctly but subsequent items are rendered on separate lines. code <div class="card-group"> {% for item in wt %} <di ...

cssdjangotwitter-bootstrapbootstrap-4django-templates

Tips for effectively utilizing the container class in bootstrap

As I work on developing a responsive website, I am utilizing Bootstrap 4 to create a navigation bar. The question arises, does the version of Bootstrap truly make a difference in this case? Furthermore, is the navigation bar essentially the most prominent ...

twitter-bootstrapbootstrap-4

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

htmlcsstwitter-bootstrap

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

Developing an interactive selector within the on() event handler

My goal is to utilize the on() event for managing dynamically created code. It functions properly when the selector is hardcoded in the on() event. However, I aim to enable it to select different elements depending on which box they choose. $("body").on( ...

javascriptjqueryhtml

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

javascripthtmlreactjsgoogle-chrome-extensionmaterial-ui

Tips for creating a dynamic logo that zooms in when you hover over it

Is there a way to create a zoom effect for the logo in my navigation bar when hovering over it without using jQuery? I've tried various codes from different sources but none seem to work. The .logo class is assigned to the logo in the nav bar. Any sug ...

htmlcss

Creating a form that seamlessly integrates with the content using a combination

As I continue to explore the depths of WordPress and delve into learning HTML/CSS, my latest project involves embedding an email signup form on my website using Klaviyo. The basic code provided by their form creator initially had everything condensed into ...

htmlcssforms

What is the technique for applying HTML element formatters to column headers using the to_html method to achieve rotation?

I am currently working with a Pandas DataFrame and I am looking for a way to display it on an HTML page with minimal empty space. Additionally, I am utilizing Bootstrap 4. To format all elements of a column, I can use the to_html method along with table s ...

csspython-3.xpandasdataframebootstrap-4

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

htmlcsscss-shapes

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

Creating an If statement to evaluate the state of a parameter

In my simple Graphics User Interface, when the user clicks on "move", a yellow rectangle div moves across the screen. Now, I am trying to implement an event based on the position of the rectangle on the page. For example, if the div is at 400px (right), t ...

javascriptjqueryhtml