When working on a small screen, Bootstrap generates divs one by one

Question

When working on a small screen, Bootstrap generates divs one by one

Hey there! I've been working with bootstrap CSS library version 5.1.3 and I'm trying to create a simple card layout where there's an image on the left side and text on the right side. Everything looks great on a large screen, but I'm struggling with aligning the image first and then the text below it on a smaller screen. Can anyone assist me in fixing this issue? If it's not possible with the current code, I'm open to suggestions on how to achieve this card design in a different way.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b2021202635241451736c73786815">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container py-4">
        <div class="bg-light d-flex"> 
            <div class="flex-shrink-0">
                <img src="https://i.ibb.co/kDv9tyc/img.jpg" height="350">
            </div>
              
            <div class="flex-grow-1 px-3">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

Output on large size screen:

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

Current output on small size screen:

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

Expected output:

https://i.sstatic.net/1h8Iu.png

html css bootstrap-5

Answer 1

Answer №1

To implement a responsive layout using Bootstrap, utilize the flex grid system. By creating a row with two columns, you can ensure your design adapts to different screen sizes.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455a4558">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container py-4">
        <div class="bg-light row"> 
            <div class="col-md-3 p-3">
                <img src="https://i.ibb.co/kDv9tyc/img.jpg" class="my-image text-center img-fluid">
            </div>
              
            <div class="col-md-9 p-3">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

CSS To enhance the code structure, consider moving the height property from the HTML file to the CSS file. Utilize a media query to set the image height to 350px for screens wider than 768px. Additionally, ensure the image width is set to 100%.

Below is an example of the CSS code:

img.my-image{
      width:100%
  }
/* // Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
   img.my-image{
     height:350px;
   
    }
 }

For a live demonstration, you can view the code on CodePen:

https://codepen.io/shingai/pen/vYpbdKB

Answer 2

To implement a responsive layout using Bootstrap, utilize the flex grid system. By creating a row with two columns, you can ensure your design adapts to different screen sizes.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455a4558">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container py-4">
        <div class="bg-light row"> 
            <div class="col-md-3 p-3">
                <img src="https://i.ibb.co/kDv9tyc/img.jpg" class="my-image text-center img-fluid">
            </div>
              
            <div class="col-md-9 p-3">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

CSS To enhance the code structure, consider moving the height property from the HTML file to the CSS file. Utilize a media query to set the image height to 350px for screens wider than 768px. Additionally, ensure the image width is set to 100%.

Below is an example of the CSS code:

img.my-image{
      width:100%
  }
/* // Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
   img.my-image{
     height:350px;
   
    }
 }

For a live demonstration, you can view the code on CodePen:

https://codepen.io/shingai/pen/vYpbdKB

Answer 3

Answer №2

If you're utilizing bootstrap, it is recommended to make use of the Bootstrap grid system. This will transform your code into the following structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b05e4f7f0a110e110c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container">
        <div class="bg-light row"> 
            <div class="col-md-3">
                <img class="w-100" src="https://i.ibb.co/kDv9tyc/img.jpg">
            </div>
              
            <div class="col-md-9">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

Answer 4

If you're utilizing bootstrap, it is recommended to make use of the Bootstrap grid system. This will transform your code into the following structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b05e4f7f0a110e110c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container">
        <div class="bg-light row"> 
            <div class="col-md-3">
                <img class="w-100" src="https://i.ibb.co/kDv9tyc/img.jpg">
            </div>
              
            <div class="col-md-9">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

When working on a small screen, Bootstrap generates divs one by one

Answer №1

Answer №2

Similar questions

What's the best way to update the menu element colors as I scroll down the page?

Storing HTML form information into a CSV file using Python and Flask

Creating a dynamic background color that pulses with animation

The fixed table header is covering the navigation bar

Something seems to be preventing Div from appearing and there are no error messages appearing

Ensuring that all of the content is adaptable across various devices, from smartphones to high-definition 1080p screens

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

CSS filter for Internet Explorer

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Remove HTML element and launch in a separate browser tab while preserving styles

Steps for eliminating a column from a table

Modifying the color of an empty string is not feasible in Javascript

Move the text above within the footer using materialize framework

Incorporating ASP includes within an HTML file

Including CSS in an HTML file does not function properly

Transfer data from href link to specific detail page

Adjust the background color of a list item using Typescript

CSS PopUp positioning

Using .get methods with jQuery's .on

Showcased a few items from the model.forms dataset