Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Question

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve:

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

This code snippet below is only designed for desktop size:

             <div className="row wrapper-about">
                <div className="col-lg-6 col-md-6 col-6">                  
                    <div className="img-box">
                      <img src="/pp1.jpg" alt="foto.jpg" />
                    </div>
                </div>
               <div className="col-lg-6 col-md-6 col-6">
                  <div className="row">
                      <div className="desc-container">
                        <h5 className="text-justify">
                          Content 2
                        </h5>
                      </div>
                  </div>
                  <div className="row desc2-d">
                      <span>
                        Content3                   
                      </span>
                  </div>
                </div>
             </div>

html css bootstrap-4 responsive-design frontend

Answer 1

Answer №1

To create this layout without any additional CSS or redundant markup, a simple approach would be to disable flexbox for larger screens and utilize float utilities:

Check out this Codeply example

<div class="container">
    <div class="row d-md-block">
        <div class="col-6 col-md-8 float-left border border-danger c1">
        c1
        </div>
        <div class="col-6 col-md-4 float-left border border-success">
        c2
        </div>
        <div class="col-12 col-md-4 float-left  border border-warning">
        c3
        </div>
    </div> 
</div>

Similar queries have been addressed in the past:

Rearranging responsive Bootstrap 4 grid layout
Bootstrap with different order on mobile version
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Bootstrap 4 - Stack 2 columns with 1 large column on the right

Answer 2

To create this layout without any additional CSS or redundant markup, a simple approach would be to disable flexbox for larger screens and utilize float utilities:

Check out this Codeply example

<div class="container">
    <div class="row d-md-block">
        <div class="col-6 col-md-8 float-left border border-danger c1">
        c1
        </div>
        <div class="col-6 col-md-4 float-left border border-success">
        c2
        </div>
        <div class="col-12 col-md-4 float-left  border border-warning">
        c3
        </div>
    </div> 
</div>

Similar queries have been addressed in the past:

Rearranging responsive Bootstrap 4 grid layout
Bootstrap with different order on mobile version
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Bootstrap 4 - Stack 2 columns with 1 large column on the right

Answer 3

Answer №2

If you're working with the Bootstrap grid system, you'll need to include the C3 div twice. Place it once inside the second column of the first row (for larger screens) and again below the first row (for smaller screens). You can then use media queries to toggle the visibility based on the 768px breakpoint to achieve your desired layout...

Check out the code snippet below:

.divC1 {
  border: 5px solid red;
  height: 300px;
}

.divC2 {
  border: 5px solid green;
  height: 150px;
}

.divC3 {
  border: 5px solid yellow;
  height: 150px;
}

@media screen and (max-width:768px) {
  .divC2 {
    height: 300px
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container-fluid">
  <div class="row">

    <div class='col-6 col-sm-6'>
      <div class="row">
        <div class="col-sm-12 divC1"> C1
        </div>
      </div>
    </div>

    <div class='col-6 col-sm-6'>
      <div class="row">
        <div class="col-sm-12 divC2"> C2
        </div>
        <div class="col-sm-12 divC3 d-none d-md-block"> C3
        </div>
      </div>
    </div>

    <div class='col-12 divC3 d-block d-md-none'> C3
    </div>

  </div>
</div>

Answer 4

If you're working with the Bootstrap grid system, you'll need to include the C3 div twice. Place it once inside the second column of the first row (for larger screens) and again below the first row (for smaller screens). You can then use media queries to toggle the visibility based on the 768px breakpoint to achieve your desired layout...

Check out the code snippet below:

.divC1 {
  border: 5px solid red;
  height: 300px;
}

.divC2 {
  border: 5px solid green;
  height: 150px;
}

.divC3 {
  border: 5px solid yellow;
  height: 150px;
}

@media screen and (max-width:768px) {
  .divC2 {
    height: 300px
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container-fluid">
  <div class="row">

    <div class='col-6 col-sm-6'>
      <div class="row">
        <div class="col-sm-12 divC1"> C1
        </div>
      </div>
    </div>

    <div class='col-6 col-sm-6'>
      <div class="row">
        <div class="col-sm-12 divC2"> C2
        </div>
        <div class="col-sm-12 divC3 d-none d-md-block"> C3
        </div>
      </div>
    </div>

    <div class='col-12 divC3 d-block d-md-none'> C3
    </div>

  </div>
</div>

Answer 5

Answer №3

Here is a code snippet that can assist you:

.c1 { height:200px; outline:2px solid red; outline-offset: -5px; }
.c2 { height:100px; outline:2px solid green; outline-offset: -5px; }
.c3 { height:100px; outline:2px solid yellow; outline-offset: -5px; }

@media only screen and (max-width:768px) and (min-width:200px) {  

       .c1 { height:auto; }
   .c2 { height:auto; }
   .c3 { height:auto;}    

     }

<meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c1">
C1
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c2">
C2
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 c3">
C3
</div>

Answer 6

Here is a code snippet that can assist you:

.c1 { height:200px; outline:2px solid red; outline-offset: -5px; }
.c2 { height:100px; outline:2px solid green; outline-offset: -5px; }
.c3 { height:100px; outline:2px solid yellow; outline-offset: -5px; }

@media only screen and (max-width:768px) and (min-width:200px) {  

       .c1 { height:auto; }
   .c2 { height:auto; }
   .c3 { height:auto;}    

     }

<meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c1">
C1
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c2">
C2
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 c3">
C3
</div>

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to prevent Internet Explorer from caching my webpage?

Need assistance posting on Twitter? Utilize PHP for a solution!

Achieving equal heights for div boxes while aligning list items inside

Displaying a message text upon successful AJAX request

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

JS How can I generate individual buttons in a loop that trigger separate actions?

Ensuring a DIV remains fixed in place for a specific number of scrolls

The problem of undefined icons in Material UI's Stepper StepLabel

Nested div within another div, shifting position relative to scrolling (React)

Automatically navigate to a specific element as the user scrolls down the page

How can we determine if the submit function in HTML5 is returning an error or not?

What is the best way to enlarge a thumbnail using CSS?

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

Python file is not able to show data on HTML table

Using values from an appsettings.json file as href variables in an AMP html: a complete guide

What is the method for selecting an li element within a ul list using Selenium in Python?

Using media queries in CSS to create responsive designs

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

Check the radio box corresponding to the adjacent label

Achieve hidden and visible elements using CSS without redundancy