Ensuring consistent column heights in Bootstrap across all devices

Question

Ensuring consistent column heights in Bootstrap across all devices

There is an HTML element containing an image and text positioned side by side using Bootstrap. Here is the code:

<div class="row">
  <div class="col-md-6">
    <div class="avatar">
      <img src="<?= get_template_directory_uri(); ?>/dist/images/weare.png" alt="" class="img-responsive">
    </div>
  </div>
  <div class="col-md-6">
    <blockquote>
      <h1>Title</h1>
      <p>Text.</p>
    </blockquote>
  </div>
</div>

The issue arises when viewing the design on a small screen where the image does not take up the full canvas size.

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

On a large screen, the text box appears way too large.

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

Looking for a way to maintain a fixed height on all screen sizes, I am seeking help with adjusting the Bootstrap and flexbox properties.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Give This a Shot

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<div class="row p-2">
  <div class="col-md-6">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the essential elements of written work. Many individuals determine paragraphs based on their length, such as a paragraph constituting a minimum of five sentences or half a page. However, the true essence of a paragraph lies in the cohesion and coherence of ideas among sentences. Therefore, paragraphs serve as the foundation of written pieces, binding thoughts together into a unified whole. </p>
  </blockquote>
</div>



<div class="row p-2">
  <div class="col-md-6 ">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the fundamental components of literary works. Many students associate paragraphs with a specific length, like a group of at least five sentences or half a page. However, the coherence and unity of ideas within sentences truly define a paragraph's essence. Therefore, paragraphs play a crucial role in structuring written compositions, ensuring a logical flow of ideas. </p>
  </blockquote>
</div>

Answer 2

Give This a Shot

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<div class="row p-2">
  <div class="col-md-6">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the essential elements of written work. Many individuals determine paragraphs based on their length, such as a paragraph constituting a minimum of five sentences or half a page. However, the true essence of a paragraph lies in the cohesion and coherence of ideas among sentences. Therefore, paragraphs serve as the foundation of written pieces, binding thoughts together into a unified whole. </p>
  </blockquote>
</div>



<div class="row p-2">
  <div class="col-md-6 ">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the fundamental components of literary works. Many students associate paragraphs with a specific length, like a group of at least five sentences or half a page. However, the coherence and unity of ideas within sentences truly define a paragraph's essence. Therefore, paragraphs play a crucial role in structuring written compositions, ensuring a logical flow of ideas. </p>
  </blockquote>
</div>

Answer 3

Answer №2

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <div class="container-overflow-wrap">
    <div class="container">
        <div class="hidden-xs">
            <div class="row row-padded row-bordered row-centered">
                <div class="col-sm-6">
                    <div class="avatar">
                        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1">
                    <blockquote>
                        <h1>hi this a demo</h1>
                        <p>The Moon is a barren, rocky world without air and water. It has dark lava plain on its surface. The Moon has filled with craters. It has no light of its own. It gets its light from the Sun. The Moo keeps changing its shape as it moves around the Earth. It spins on its axis in 27.3 days stars were named after the Edwin Aldrin were the first ones to set their foot on the Moon on 21 July 1969 They reached the Moon in their spacecraft named Apollo II</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

give it a try, it might be useful

Answer 4

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <div class="container-overflow-wrap">
    <div class="container">
        <div class="hidden-xs">
            <div class="row row-padded row-bordered row-centered">
                <div class="col-sm-6">
                    <div class="avatar">
                        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1">
                    <blockquote>
                        <h1>hi this a demo</h1>
                        <p>The Moon is a barren, rocky world without air and water. It has dark lava plain on its surface. The Moon has filled with craters. It has no light of its own. It gets its light from the Sun. The Moo keeps changing its shape as it moves around the Earth. It spins on its axis in 27.3 days stars were named after the Edwin Aldrin were the first ones to set their foot on the Moon on 21 July 1969 They reached the Moon in their spacecraft named Apollo II</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

give it a try, it might be useful

Ensuring consistent column heights in Bootstrap across all devices

Answer №1

Answer №2

Similar questions

The data-ng-bind directive cannot be used with the <option> tag

Is it possible for us to customize the angular material chip design to be in a rectangular shape

What is the best way to overlay text onto a background image using Material UI's Card and CardMedia components?

Leveraging Polymer web components without the need for a package manager

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

What is causing the action button in my MUI snackbar to occupy an additional line?

Troubleshooting a mysterious anomaly with a jQuery UI button

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Is OpenLayers + Ajax causing issues or errors?

Content move to the left with Material UI's shifting capabilities

Creating a button for every individual row within a table using a combination of PHP and HTML

What is the proper method to deactivate a hyperlink in Angular 2?

Utilizing document.write to switch up the content on the page

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

Issues with Laravel 8's datatable scripts causing dysfunction

Step-by-step guide on creating a blank horizontal line in an HTML table

Encasing extracted content in <p> tags

Attempting to establish a means to switch between languages

"Enhance User Experience with the jQuery/JavaScript Table Pagination