The content spills over when applying the Bootstrap Grid system

I am working on creating a display heading that includes images on both the left and right sides of the heading. The layout looks great on larger displays, but as I shrink the display size, the text in the heading overflows the column on the right, causing an uneven appearance. I want the images and text to remain aligned on smaller screens. Could this issue be related to the grid system I am using?

https://i.sstatic.net/6h1nt.png

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>farfetch'd | Official Website ‐</title>

  <!--CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="CSS/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- favicon -->
  <link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>

<body>

  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
        </div>
        <div class="col">
          <h1 class="display-4 text-center">farfetch'd</h1>
        </div>
        <div class="col">
          <img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
        </div>
      </div>
    </div>
  </body>

htmlcssbootstrap-4

Answer №1

To ensure that the text always stays centered within the div, one method is to use vw for sizing instead of rem.

rem:

Represents the font-size of the root element (usually <html>). When used within the root element's font-size, it represents the initial value (commonly set to 16px in browsers, but can be changed by user preferences).

vw:

Equal to 1% of the viewport's initial containing block width.

Visit length for more details on this approach.
The final CSS code will look like:

.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>farfetch'd | Official Website ‐</title>

  <!--CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="CSS/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- favicon -->
  <link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col">
        <img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
      </div>
      <div class="col">
        <h1 class="heading text-center">farfetch'd</h1>
      </div>
      <div class="col">
        <img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
      </div>
    </div>
  </div>

</body>

Answer №2

It appears that the standard behavior of the header1 tag is to display in a certain way. However, you have the ability to modify this display using properties such as overflow-wrap and overflow in your CSS stylesheet.

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

When users click on the tiles, they will act as interactive objects that will direct them to a different page within the Angular framework,

output Here is the code for my app component: <H1>AI API DEMOS</H1> <div> <ul> <li class="active"><a routerLink="/market">Market Size</a></li> <li role="presentation&qu ...

javascripthtmlangular

Handlebars template engine does not support query parameters

Below is the code snippet I am working with: app.get("/editar-equipo?:id", (req, res) => { const equipos = obtenerEquipos() let equipoSeleccionado for(let i = 0; i < equipos.length; i++){ if(equipos[i].numeroId === ...

javascripthtmlnode.jsexpressexpress-handlebars

What could be the reason for the presence of a white border in the footer section?

I am trying to create a div in the footer that sits side by side, but the current code is causing it to have an unwanted white border. <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #botto ...

htmlcss

datetime-local format changing after selection

In an ionic application running on an android system, there is a issue with the formatting of <input type='datetime-local'> inputs. After a user selects a date, the Start input is formatted differently than the Ende input. Attempts to use t ...

javascripthtmlangularjsdate

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

What is the correlation between $container-max-width and $grid-breakpoint in Bootstrap version 4?

Query: I am working with Bootstrap v4 in a project and I am curious about the connection between the default values assigned to the keys in the $container-max-width and $grid-breakpoint SASS maps. Is there a correlation between them in Bootstrap v4? Bac ...

csstwitter-bootstrapsassgridtwitter-bootstrap-4

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

javascripthtmlangularjs

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

I am facing a challenge in selecting an h1 element from a remote page that I have loaded into $(data). Despite several attempts, I am struggling to write the correct code. When I use this code: console.log($(data)); The output is as follows: [text, meta ...

javascriptjqueryhtml

The fancybox's excess content is concealed

I've recently integrated fancybox 2 into my project and have encountered an issue when appending HTML content to the modal. I disabled scrolling, but now any overflowing content is being hidden. Could this be related to the max-height of the modal? Ho ...

javascriptjqueryhtmlcssfancybox-2

Challenges arising from utilizing distinct list style types for both parent and child elements with the assistance of CSS List

I am experimenting with the CSS counter reset feature to create a numbering system on my website. The main list should be in regular decimal format (e.g. 1, 2, 3, 4) while the sub-list should be in upper Roman numerals (e.g. I, II, III, IV, etc). Below is ...

htmlcsscss-counter

Renaming form elements using JQuery's .load method

This is a page named A.html <form name=form> <input type=text id = txtA> </form> When I use jQuery to load it into B.html, it loads multiple times. <form name=form> <input type=text id = txtA> </form> <form name=f ...

phpjavascriptjqueryhtml

Fixing a CSS animation glitch when using JavaScript

I'm facing an unusual issue with my CSS/HTML Check out my code below: a:hover { color: deeppink; transition: all 0.2s ease-out } .logo { height: 300px; margin-top: -100px; transition: all 0.2s ease-in; transform: scale(1) } .logo:hover { transit ...

javascripthtmlcss

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

Delay the jQuery event handler for a few milliseconds before triggering

I'm currently working on a navigation menu, but I've encountered some bugs and I'm struggling to fine-tune it completely. Here are the issues I'm facing, and any help or solutions would be greatly appreciated. The menu items (About ...

jqueryhtmlcss

What is preventing the conditional class in Svelte from being applied when the page loads?

Contextual Background In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was ...

htmlcssbootstrap-5sveltesveltekit

Arrange items in a single parent Div in flex-column format, aligning them to the left and

In my Angular application, I am experimenting with stacking Bootstrap toast elements in a customized vertical layout. Specifically, I want certain toast elements to be positioned on the left side of the page (using the align-items-start style) and others o ...

cssangularbootstrap-4flexboxtoast

What are the steps to turn off the mobile version of a website?

My website is currently not fully responsive for mobile devices. I am wondering if there is a way to ensure that my app always loads the desktop version when accessed from a mobile device. The site was developed using Java, Bootstrap, HTML, CSS, JavaScri ...

javawebmobilebootstrap-4

Increase the size of the parent div as the height of the position:absolute child div grows

I am facing an issue with a parent div and its 2 child divs. <div id="parent"> <div class="child1 col-2"></div> <div class="child2 col-10"></div> </div> The child1 div has absolute positioning a ...

jquerycss

Updating Icons in HTML Using Local Storage and Implementing a Dark Mode Feature Using JavaScript

My latest project involved creating a dark mode button along with a custom dark theme. The theme is stored in Local Storage to ensure consistency. However, I have encountered an issue where, upon page reload, the site remains in dark mode but the button ic ...

javascripthtmlcssiconslocal-storage

Creating a smooth fading effect for an element within a react component

I am currently working on implementing a fade out warning/error message (styled with Bootstrap) in a React component, however, I am encountering some challenges with the timing of the fade-out effect. Up to this point, the fade out effect is functioning c ...

javascriptcssreactjsclass-names