Information flows from the Bootstrap 4 template

When viewed on a mobile device, the content extends beyond the page and a horizontal scrollbar appears.

You can view my page by clicking this link.

<div class="custom_content col-md-12">
  <div class="container">
    <div class="row">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?php echo $host; ?>" title="Home">Home</a></li>
            <li class="breadcrumb-item"><a href="<?php echo $host; ?>/<?php echo $pageSeo; ?>" title="<?php echo $pageTitle; ?>"><?php echo $pageTitle; ?></a></li>
          </ol>
        </nav>
    </div>
    <div class="row">
        <h1 class="page_title"><?php echo $pageTitle; ?></h1>
    </div>
    <div class="row">
        <div class="content"><?php GetContent($siteID); ?></div>
    </div>
  </div>
</div>
htmlcssbootstrap-4flexbox

Answer №1

You are requested to insert an additional div with the class col immediately following the row.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom_content col-md-12">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?php echo $host; ?>" title="Home">Home</a></li>
            <li class="breadcrumb-item">
              <a href="<?php echo $host; ?>/<?php echo $pageSeo; ?>" title="<?php echo $pageTitle; ?>">
                <?php echo $pageTitle; ?>
              </a>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h1 class="page_title">
          <?php echo $pageTitle; ?>
        </h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="content">
          <?php GetContent($siteID); ?>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

<section class="custom_content">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo $host; ?>" title="Kezdőlap">Kezdőlap</a></li>
                        <li class="breadcrumb-item"><a href="<?php echo $host; ?>/<?php echo $pageSeo; ?>" title="<?php echo $pageTitle; ?>"><?php echo $pageTitle; ?></a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h1 class="page_title"><?php echo $pageTitle; ?></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="content"><?php GetContent($siteID); ?></div>
            </div>
        </div>
    </div>
</section>

Your code needs some adjustments! Without the CSS provided, I fixed the layout structure for you. You should have applied 

.container > .row > .col-*-*

  • Containers are essential for centering and padding your website's content horizontally. Use .container for responsive pixel width or .container-fluid for full-width across all screen sizes.
  • Rows act as wrappers for columns. Each column has horizontal padding (gutters) to control space between them. These paddings are then balanced out with negative margins on rows, ensuring alignment of content in columns.
  • In a grid layout, content must be placed within columns, which are the immediate children of rows.

For more guidance, check out Bootstrap Grid System documentation

Answer №3

To properly structure your layout, place your container tag outside the row and col tags as shown below:

<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div></div>

Following this format will resolve any layout issues!

If you encounter other cases, use the following code snippet:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Include this meta tag in your code to ensure a responsive design based on screen size.

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

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Apologies for the unclear title, I struggled to find the right words. Recently, I delved into the world of 2D game development and was amazed by the capabilities of HTML5's Canvas element. Currently, I am working on my first basic project to grasp th ...

javascripthtmlcanvas

Creating a border around an SVG element using the background color of its parent container

I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of ...

cssmaterial-ui

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

javascriptjquerycssselenium

Creating a dynamic background using a blend of two hues in CSS

Is there a way to stack two colors on top of each other using just one div element, or even better, achieve the same effect with just one color that is a blend of the two? I currently have two divs superimposed, with the top one at 60% opacity. I've ...

htmlcssbackground-image

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

jquerycsstwitter-bootstrap-3hover

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

javascripthtmlradio-button

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code snippet: .navi ul li { float:left; list-style-type: none; border-right: 1px solid #c0c0c0; margin:0px 0 0 0; } .navi ul li:last-child { border:none; } .navi ul li a { display:block; margin:0 20px; text-dec ...

htmlcss

Python Selenium: How to interact with an element nested within multiple HTML tags

Currently, I am working on automating a website using selenium webdriver in Python. However, I have encountered an issue when trying to click on a specific tag. The website that I am attempting to automate is quite old and contains numerous iframes and &l ...

pythonhtmlseleniumxpathwebautomation

Retrieve the data entered in the submit button field

My question concerns a form with two buttons: <form method="post" action=""> <button type="submit" name="age" value="20">Age 20</button> <button type="submit" name="age" value="30">Age 30</button> </form> When ...

javascriptjqueryhtmlajaxserialization

Creating Beautiful Math Equations with LaTeX in EaselJS

Can MathJAX or a similar tool be integrated into an EaselJS DisplayObject? I am looking for alternative options. I want to render text like $$ 5 + 3 - 3 = 5 $$ on a canvas that serves as an EaselJS stage. Ideally, I hope to achieve this using the Text Cl ...

javascripthtmllatexeaseljsmathjax

Styling Collapse Text in Bootstrap Framework

I have a question about the "Accordion example" in the Bootstrap Collapse Component. My query is regarding removing the underline from the text "Collapsible Group Item" 1-3 when they are activated. Normally, this text is not underlined, but upon hovering, ...

htmlcssbootstrap-4

Deciding between Document.createElement() and Document.createTextNode() in Javascript

I'm currently exploring the distinctions between these two code snippets: // first one var h1 = document.createElement('h1'); var t = document.createTextNode('hello'); h1.appendChild(t); document.body.appendChild(h1); // second o ...

javascripthtml

Setting Up One Stylesheet Based on Local Preferences

I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the l ...

htmlruby-on-railscsslocalization

What is the best way to relocate a child component to a different parent in React?

I have a list of child components with checkboxes, and when a checkbox is clicked, I want to move that child component inside another div. Below is an illustration of how my app should look. I need to select student names and shift them up under the "Pres ...

javascripthtmlreactjs

Is it possible to send a PHP variable to a popup using a button and JavaScript?

I am facing an issue with a dynamically created table in PHP that displays requests. Each row in the table has a button to open a popup. I need to pass the ID of each request to the popup to retrieve all the data associated with it. Can someone guide me o ...

javascriptphphtmlpopup

Arranging items in the final row of a flexbox

, I am seeking a solution that goes beyond the repetitive ones provided before. I need to find a more efficient way to achieve my desired outcome based on the code snippet below. In examining the code, it's clear that the first row accommodates 6 ele ...

htmlcssflexbox