Unable to place the content within the container in Bootstrap 4

I am a newbie to Bootstrap and I've encountered an issue with content placement in a container. Even though most of the content is within the container, there seems to be a part (refer to picture container_fail) that is not enclosed properly. Please refer to the image (container_fail). Can anyone guide me on what mistake I might be making here to prevent this? It could be something basic that I'm missing. Your assistance would be highly appreciated!

This is the code snippet I've come up with so far:

.container#parallex {
  background: black;
}

/* Parallax */

#plx {
  ...
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
                    <section id="plx">
                        <div class="container">
                            <div class="wtitle text-center text-light">
                                <h2>
                                    Lorem ipsum dolor sit.
                                </h2>
                            </div>
                        </div>
                    </section>
                    <section id="treppen">
                        <div class="container">
                            <div class="text-muted" id="text5">
                                Add your content here...
                            </div>
                        </div>
                    </section>

https://i.sstatic.net/f01Vv.jpg

htmlcssbootstrap-4

Answer №1

I have made adjustments to the HTML structure by changing the h1 tag to a p tag for paragraphs and removing CSS properties from the h1 tag.

.container#parallex {
  background: black;
}

/* Parallex*/

#plx {
  background: url(/images/pic4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wtitle {
  padding: 150px 20px;
}

.wtitle h2 {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05rem;
}

#treppen {
  height: 700px;
  background: #f5f5f5;
}

#text5 h1 {
  line-height: 1.6;
  letter-spacing: 0.1px;
  /*padding: 40px 40px;*/
  font-family: "Segoe UI";
  font-size: 1.25rem;
  font-weight: 300;
}

.navbar-brand img {
  height: 30px;
  width: 30px;
}

.row img {
  height: 24px;
  width: 24px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="plx">
        <div class="container">
         <div class="wtitle text-center text-light">
          <h2>
           Lorem ipsum dolor sit.
          </h2>
         </div>
        </div>
       </section>
       <section id="treppen">
        <div class="container">
         <div class="text-muted" id="text5">
          <p class="text-muted">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
          </p>
          <p class="text-muted" style="padding-top: 0px; font-weight: bold">
           Lorem ipsum dolor sit:
          </p>
          <div class="row subsection">
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono Web" class="lozad" data-loaded="true" data-src="/images/pic5.jpg" height="40" src="/images/pic5.jpg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ipsam magni recusandae illum neque ratione quisquam assumenda ad? Placeat, consequuntur..
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono servidor" class="lozad" data-loaded="true" data-src="/img/w_server.svg" height="40" src="/img/w_server.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, harum. Nam sit nihil excepturi sint ad sequi nobis dolorem cumque.
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono app" class="apps--img lozad" data-loaded="true" data-src="/img/w_apps.svg" height="40" src="/img/w_apps.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, molestiae velit. Debitis adipisci aut ducimus labore nulla fuga alias itaque!
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono integración" class="lozad" data-loaded="true" data-src="/img/w_integration.svg" height="40" src="/img/w_integration.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo fugit accusantium natus tenetur dicta perspiciatis dolor et sed quidem modi!
             </p>
            </div>
           </div>
          </div>
         </div>
        </div>
       </section>

Answer №2

It doesn't make sense to have a long headline here, so let's change the h1 tag to a paragraph instead.

Instead of:

<div class="container">
   <div class="text-muted" id="text5">
       **<h1 class="text-muted">**
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
       </h1>
   </div>
</div>

it would be better to use

<div class="container">
   <div class="text-muted" id="text5">
       **<p class="text-muted">**
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
       </p>
   </div>
</div>

Answer №3

Update the CSS styles https://i.sstatic.net/9CqQq.png 

 <style>
        .container#parallex {
            background: black;
        }

        /* Parallax*/

        #plx {
            background: rgba(0, 0, 0, 0.5);
            background: url("images/1.jpg");
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        ...


        .row img {
            height: 24px;
            width: 24px;
        }
    </style>
<!DOCTYPE html>

...

<p class="text__small">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Explicabo fugit accusantium natus tenetur dicta perspiciatis dolor et sed quidem
                                    modi!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

...

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

Incorporate text into icon design within Bootstrap 5's navigation bar

Can someone help me with adding text to the icon navbar? I'm having trouble figuring it out. The example I'm trying to replicate is here. Below you'll find my navbar code, which uses basic Bootstrap CSS. <link href="https://cdn.jsdeli ...

bootstrap-4navbarbootstrap-5

What steps can be taken to resolve a situation in Ruby on Rails where the Navbar drop-down menu fails to display any of its items?

I recently began working on a webpage with a Navbar featuring a drop-down menu to the right. However, when clicking on the trigger to display the drop-down content, none of the items are being shown. For the front-end design, I initially used Materialize ...

htmlruby-on-railssassbootstrap-4materialize

Strategies for avoiding text wrapping in Bootstrap labels on Firefox

Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons: Ch ...

htmlcsstwitter-bootstrap

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

htmlcssborder

Achieve a top position in CSS layout without resorting to negative values

This may seem like a simple thing, but I'm struggling to achieve it without using negative values for padding-top. Here's how my site looks: Here is the CSS code I am using: .center { width: 1030px; margin: 0 auto; } .top-panel { backgr ...

htmlcssmarginpadding

What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox. I attempted using top: 0 or adjusting the flex-direction to column. .container { position: relative; } .top { display: flex; justify-content: space-b ...

htmlcssflexbox

Ways to customize the appearance of a unique component

I'm faced with a challenge where I need to make edits to a component that is not editable: import * as React from 'react' import styled from '@emotion/styled' import FlexRow from '../../layouts/FlexRow' const RowContaine ...

javascriptcssreactjsreact-props

Some characters can trigger buttons to appear incorrectly on HTML pages, one example being the √ symbol

I am currently working on a project involving an emoji panel. However, I have encountered an issue where certain characters are causing some buttons to display differently. Here is the code snippet that demonstrates the problem: button { width: 50px ...

htmlcss

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

jQuery's resize() function is not functioning properly

I have a question about resizing my menu items using jQuery. Currently, I am successfully able to resize the list items when the page is reduced in size. However, when I try to increase the page size, the list items do not decrease accordingly. Is there a ...

jqueryhtmlresize

Best practices for displaying output in Python Flask after submitting an HTML form

Embarking on my first web development project, I delved into Flask. Recently, I created a basic temperature converter, running it on my local host. The webpage featured a form input for entering a value, two radio buttons for selecting Fahrenheit or Celsiu ...

pythonhtmlcssflaskpython-requests

Having trouble selecting a box with Selenium Webdriver in Python

When using Selenium Webdriver with Python, I am facing an issue clicking on the box that contains the text "24h". Here is my code snippet: from selenium import webdriver from PIL import Image from selenium.webdriver.chrome.service import Service import ti ...

pythonhtmlselenium

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

javascripthtmlcssreactjs

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

The Sacred Chalice Trio Vertical Stretch Design

Recently, I've been working on creating a three column layout with percentage width. I stumbled upon the concept of the Holy Grail web design through some online articles and resources. To implement this layout, I referred to an example from The Perfe ...

htmlcsslayout

Steps for incorporating a storyline into a CSS Chart

I'm attempting to introduce a horizontal line at a specific point using chartscss.org For instance, on the given chart utilizing Charts CSS below, I'm aiming to include a horizontal line at 15.5... Similar to the illustration shown. I've e ...

htmlcsschartsbootstrap-5

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

I have two JSON files named marker.json and marker.json0 that contain different latitude and longitude coordinates. To load them, I need to rename .json0 to .json (and vice versa), so that the new data from marker.json0 now resides in marker.json. This way ...

javascripthtmljsoncssgoogle-maps-api-3

Instructions on showcasing a PHP database query result in an HTML table on the same page using a single script

Just a quick query - I need to know how to select and display a row from my database using PHP in an HTML table below my current code. I've tried calling the DisplayTable() function when clicking an HTML button within the same script, but it's no ...

phphtml

The drop-down items on the navigation bar disappear too quickly

After spending hours getting everything laid out and functioning perfectly, suddenly the menus started disappearing when trying to select an item from the drop down. No matter what I tried, like changing ul ul{display: block;}, the issue persisted. It used ...

htmlcssdrop-down-menunavigation

What is preventing the JQuery dialog from opening?

When I try to trigger a dialog box by pressing the enter key, it is not working as expected. Instead of opening the dialog, it just hides the text. Can someone help me understand what might be causing this issue? <!doctype html> <html lang="en" ...

javascriptjqueryhtml