Managing the width of siblings in Bootstrap 4: A Guide

Question

Managing the width of siblings in Bootstrap 4: A Guide

With two <p> elements nested under an <h1> element, my goal is to ensure that the width of the displayed paragraphs never exceeds 90% of the content width within the header. The content of both <p> and <h1> elements is dynamically generated on the server side via Django and may wrap on smaller screens.

Experimenting with d-flex, flex-column, and flex-shrink has yielded some success, although I have struggled to maintain responsive resizing of the <p> elements while also centering all three elements horizontally within the parent container div.

<div class="container">
  <div class="text-center">
    <h1 class="display-4">A Brief Yet Bold Title!</h1>
    <p class="lead">This sentence could potentially be longer than the title above. Nevertheless, its width should not exceed 90% of the h1 tag's width.</p>
    <p><i>While this sentence might be shorter, I still want to limit its width accordingly.</i></p>
  </div>
</div>

javascript css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Approach-1 (blue): In order to ensure that 90% of the paragraphs fit under the heading, we initially examined the width of the heading which turned out to be 100% of the viewport's width. This implied that to achieve a 90% width, a margin of 5% (relative to the viewport's width) needed to be applied on both sides.

Approach-2 (green): Following this, we analyzed the rendered width of the <h1>, which was measured at 413px. Subsequently, we adjusted our paragraph width to match this measurement and set margins to auto for achieving centered text alignment.

Both strategies have been illustrated in the code snippet below:

.divStrategy1 p {
  margin: 0 5vw;
  color: blue;
}

.divStrategy2 p {
  width: 413px;
  margin: auto;
  color: green;
}

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

<div class="text-center divStrategy1">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>

<div class="text-center divStrategy2">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>

Answer 2

Approach-1 (blue): In order to ensure that 90% of the paragraphs fit under the heading, we initially examined the width of the heading which turned out to be 100% of the viewport's width. This implied that to achieve a 90% width, a margin of 5% (relative to the viewport's width) needed to be applied on both sides.

Approach-2 (green): Following this, we analyzed the rendered width of the <h1>, which was measured at 413px. Subsequently, we adjusted our paragraph width to match this measurement and set margins to auto for achieving centered text alignment.

Both strategies have been illustrated in the code snippet below:

.divStrategy1 p {
  margin: 0 5vw;
  color: blue;
}

.divStrategy2 p {
  width: 413px;
  margin: auto;
  color: green;
}

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

<div class="text-center divStrategy1">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>

<div class="text-center divStrategy2">
  <h1 class="display-4">A Short Big Title!</h1>

  <p class="lead">This is a pretty long sentence, and it could be longer than the title above, however, I would not like its width to exceed 90% of that h1 tag above.</p>

  <p><i>This is a shorter sentence, however, I still have the same hopes for its width.</i></p>
</div>

Managing the width of siblings in Bootstrap 4: A Guide

Answer №1

Similar questions

Is it possible to adjust the background size using jQuery?

Refresh the webpage content by making multiple Ajax requests that rely on the responses from the previous requests

Leverage a single JavaScript file across all Vue components without the need for individual imports

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

Error encountered when trying to update Express Mongoose due to duplicate key

navigation menu not displaying properly on small screens

When retrieving data from a PHP $_SESSION using an Ajax $_POST call, outdated information is being returned

JQuery continuously firing off AJAX requests

Execute Two Functions When OnClientClick is Triggered

Angular JS was unable to show the complete sum of the row

AngularJS - Multi-controller Data Calculation

Can you guide me on implementing CSS Houdini in Next.js?

Transmit an attached image through Express

Passing values from child components to parent components in React Native for display

Why doesn't DataView or Int32Array interpret underlying bytes as individual integers instead of groups?

Transitioning NodeJS from local development to a live website

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

Styling with CSS in Django templates

Issues with the functionality of jQuery event functions