PHP header adjusting Bootstrap padding

I am facing an issue with my Bootstrap layout. I have created two columns that are intended to sit beneath the header, however, they are currently being hidden by the header. How can I adjust the code so that these two columns start beneath the header as intended?

<body>

    <?php require 'header.php';?>

    <div id="container">
        <div="row">
            <div class="col-lg-6 bg-warning">
                Content for Column 1
            </div>
        </div>
        <div="row">
            <div class="col-lg-6 bg-primary">
                Content for Column 2
            </div>
        </div>
    </div>


    <?php require 'footer.php';?>
</body>
csshtmltwitter-bootstrap

Answer №1

Using PHP to generate a header may lead to the container div getting hidden beneath the header if your CSS style includes position:fixed or position:absolute. To fix this issue, simply add a margin with the same height as the header. Here's an example:

<body>

<?php include 'header.php'; ?>

<div id="container" style="margin-top: 70px"><!-- Set the height according to your header -->
    <div class="row">
        <div class="col-lg-6 bg-warning">
            Column 1
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 bg-primary">
            Column 2
        </div>
    </div>
</div>


<?php include 'footer.php'; ?> </body>

Hope this solution helps!

Answer №2

Remove the second row as it is unnecessary.

<div id="main-container">
   <div="col-section">
       <div class="col-lg-6 bg-warning">
        Section 1
        </div>
        <div class="col-lg-6 bg-primary">
        Section 2
        </div>
   </div>
</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

Challenges with incorporating numerous text boxes in real time

There are two text boxes side by side with a "+" sign next to each. When the plus sign is clicked, a new text box appears with both the "+" and "-" signs for adding and removing the text box. I followed instructions from this resource to create my text box ...

jqueryhtmltextboxjquery-effects

Creating fixed position scroll triggered animations in React is a simple process that adds dynamic motion to your

In my project, I am aiming to create an animation that is triggered by a fixed position as demonstrated in the following example. I am currently utilizing React, Typescript, and Tailwind, while also experimenting with animation libraries such as Framer Mot ...

cssreactjsanimationcss-animationstailwind-css

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Is there a way to condense the row navigation links into a dropdown menu button if the browser window size decreases?

I've noticed that on many websites, when you narrow the width of the browser window, the row of navigation links in the top navigation bar collapses into a dropdown menu button to prevent overflow. How can I implement this feature on my website? Righ ...

htmlcssoverflow

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as &nbsp; or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

htmlcsscontent-management-systemwhitespaceword-wrap

When a div is placed over an ul list, the list becomes hidden

I've been experiencing an issue across various platforms where I try to place a ul list on top of a div (image or background), but the list doesn't appear. I suspect it may be appearing behind the elements. I even tried adding z-index. Check out ...

htmlcsshtml-listsz-index

What is causing the variables in my HTML tags to not appear?

I am currently working on a component to display random products from an array. Despite being able to see the attributes like props.products[random].company when I console log them, they are not rendering properly when placed inside HTML tags. Although th ...

javascripthtmlreactjsredux

Looking to duplicate a row of input fields while maintaining the same validation rules as the original row?

form <form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > <table id='menuAssign'> <tbody> <tr class="clone_row"> <td> <input type="text" name="menuname[]" id="menuname1" ...

javascriptphpjquerytwitter-bootstrapplsql

Challenges may arise when utilizing a variable query to showcase the outcomes within a div using ajax

Please assist me with this issue! How can I assign the value of a variable from a PHP file for comparison in my query? 2. The syntax is not correct. 3. Can I print data within the same div as "success" on my office's shed? ------ Contents of index.ht ...

phpjqueryhtmlpost

Unable to center label when adjusting TextField height beyond default

I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...

cssreactjsmaterial-ui

Modify the onerror function of the image tag within the onerror function

Here is a way to display images using the img tag: If 1.jpg exists, show 1.jpg. If not, check for 2.jpg and display it if it exists. If neither 1.jpg nor 2.jpg exist, display 3.jpg. <img src="1.jpg" onerror="this.src='2.jpg'; this.oner ...

javascriptjqueryhtml

Creating a rotating gallery with jQuery that can be navigated both forwards and backwards

Currently, I have a jQuery gallery that allows users to view images by moving forward only. What I'm looking for is a way for the user to click on the right side of the image to move to the next one and on the left side of the image to go back to the ...

jqueryhtml

Displaying information in Angular2

I'm currently facing an issue where I am unable to display certain information from my API in my view, even though the console is showing me that the necessary data is being retrieved. Below is a snippet of my Angular service: getById(id){ retu ...

javascripthtmlangularionic2

styled-components: the parent's styles take precedence over the child's styles

image export const LogOutButton = styled.button` display: inline-block; .... `; export default styled(ThemedApp)` .... button { .... display: flex; .... } `; Upon inspection, it is evident that the Logout button (with class gBuhXv) ...

cssreactjsstyled-components

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

What is the best way to ensure that all components are updated simultaneously?

I am facing an issue with showcasing relative time using momentjs - it displays 'a few seconds ago', '5 minutes ago', 'an hour ago', etc... upon rendering the HTML. However, the problem is that it remains stuck in that initial ...

javascripthtmlvue.jsvue-componentmomentjs

Tips for positioning the button directly beside the search box

I'm having trouble getting the search button to align properly next to the search box. Currently, the button appears below it. Here is my current code: <form action="{linkto page="search.php"}" method="get" id="searchFormTest"> ...

htmlcss

I am unable to incorporate added height into the component

In my current project using react.js, material-ui, and sass, I had the task of creating a ChatBit component. After writing it, here is the code: customComponent.js file. // @flow import * as React from 'react'; import { useState } f ...

javascriptcsssassmaterial-uireactjs

Adjust the positioning of the share section to take up the entire width on mobile devices, while displaying differently

When attempting to position my share div to occupy the full width of one of its sibling (person) elements, I encountered some issues. The share div is designed to only display when a button is clicked. You can view the live version and see the problem by ...

javascripthtmlcssreactjs

CSS query: How to eliminate the extra space at the top of a webpage?

How can I eliminate the gray area visible here: The padding in style.css is currently set to: padding: 0; I have attempted to modify this by changing the following: #page { margin-top: 0; } I have tried variations such as: #page { margin-top: 5px !im ...

cssmargin