Tips for creating a sidebar that seamlessly integrates with the rest of your webpage content

After attempting to adjust the sidebar and content to fit the entire screen without appearing in a 4:3 resolution, I made changes in the styles.css file but the issue persisted. I expected the layout to span the full webpage width seamlessly, eliminating any appearance of being confined to a 4:3 aspect ratio.

Here is how it currently looks:

<?php
include "header.php";
include "sidebar.php";
?>
<div class="card mt-2">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        Product Data
                        <?php
                        include '../koneksi.php';
                        $product_data = mysqli_query($koneksi,"SELECT * FROM products");
                        $num_products = mysqli_num_rows($product_data);
                        ?>
                        <h3><?php echo $num_products; ?></h3>
                        <a href="product_data.php" class="btn btn-outline-primary btn-sm">Details</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        Sales Data
                        <?php
                        include '../koneksi.php';
                        $sales_data = mysqli_query($koneksi,"SELECT * FROM sales");
                        $num_sales = mysqli_num_rows($sales_data);
                        ?>
                        <h3><?php echo $num_sales; ?></h3>
                        <a href="sales.php" class="btn btn-outline-primary btn-sm">Details</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        User Data
                        <?php
                        include '../koneksi.php';
                        $user_data = mysqli_query($koneksi,"SELECT * FROM users");
                        $num_users = mysqli_num_rows($user_data);
                        ?>
                        <h3><?php echo $num_users; ?></h3>
                        <a href="user_data.php" class="btn btn-outline-primary btn-sm">Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
include "footer.php";
?>

Sidebar File

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>POS System</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="../css/styles.css" rel="stylesheet" />
    </head>
    <body>
        <div class="d-flex" id="wrapper">
            <!-- Sidebar-->
            <div class="border-end bg-white" id="sidebar-wrapper">
                <div class="sidebar-heading border-bottom bg-light"><b>POINT OF SALE</b></div>
                <div class="list-group list-group-flush">
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="index.php">Home</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="product_data.php">Product Data</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="sales.php">Sales</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="user_data.php">User Data</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="../index.php">Logout</a>
                </div>
            </div>
            <!-- Page content wrapper-->
            <div id="page-content-wrapper">
                <!-- Top navigation-->
                <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                    <div class="container-fluid">
                        <button class="btn" id="sidebarToggle"><span class="navbar-toggler-icon"></span></button>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    </div>
                </nav>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71090e02030507081113342386098f">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="../js/scripts.js"></script>
    </body>
</html>
htmlcss

Answer №1

Based on the class names, it appears that Bootstrap is being utilized for the layout. In this scenario, ensure to define the body tag as follows:

<body class="container-fluid">

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 an array object in JavaScript is a straightforward process that involves using the array

Looking to achieve the following object list structure: myObj = {"foo":[1,2,3,4], "bar":[3,5,7,8]} Initial attempt was unsuccessful: var myObj = new Object(); myObj["foo"].push(1) myObj["foo"].push(2) #...etc Seeking guidance on the correct m ...

javascripthtml

Is there a way to prevent the page's navbar from getting hidden under the slide animation? I want to display the navbar separately at the top, with animations working as usual

I'm struggling with getting my navigation bar to work properly alongside a slide animation. No matter what I try, the navbar keeps overlapping. Here's the code I have so far: Here is the HTML section: Navbar section: <ul class="slidesho ...

cssbootstrap-4

When I click the search button on my website, it automatically scrolls to a particular <img> or <a> tag

My objective is to have the page automatically scroll down to a specific image when I perform a search using the search bar. Here is the HTML code for the search bar and button: <form id="search-form" href="#test1" class="smoothscroll"> <inpu ...

javascriptjqueryhtmlimagescroll

Crafting a lively piece of content within a written passage

My goal is to create a unique dynamic portion of text within a paragraph. I am struggling to develop an in-line div (or span) that can hold elements like an unordered list or multiple spans which can be vertically adjusted to display. Imagine a window with ...

htmlcsswidget

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

cssangulartypescript

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap

Original text:Text---------Centered Text---------Unique rewrite:Words on a page-------------Focused and clear-------------

Is there a way to create a similar design to the following: Some text ----------- Centered Button ----------- I have attempted the code below, but it doesn't quite achieve the desired look. .html <div class="dashed"> <span> ...

htmlcss

What steps do I need to take to display my background using JavaScript and CSS?

I am currently attempting to utilize a background image in iScroll's JavaScript. The script appears to use CSS within the JavaScript and allows me to add a background color, but for some reason, it is not allowing me to add an image. Is there a way to ...

javascriptjquerycss

Deactivate the attribute in the media query

I made some website with pure html/css. I defined overflow-y: scroll to some element when browser is full screen. But when screen's width is less than 400px, I want to disable that. (like, overflow-y: none. But overflow-y doesn't have none) Is ...

css

Incorporating a closing screen into a game built with Canvas and jQuery

After following a tutorial on creating a snake game, I decided to work on enhancing it as a side project. Currently, the game has a start screen where players can begin the game by pressing "start." My goal is to implement an end screen that displays the ...

javascriptjqueryhtmlcanvas

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

What is the method for deleting a phone number hyperlink on an iPhone?

I am encountering an issue with my mobile site, specifically with a Span element containing a phone number. <span class="order1-button">999-120-9191</span> The problem is that when I access the page on my iPhone, the phone number is automatic ...

htmlcssiphone

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js

Struggling to fix the excess white space appearing underneath my website

I am new to HTML/CSS and I'm currently working on adding a timeline to my website. However, I've encountered a strange issue with the #timeline class where there is an odd block of space below it whenever I try to adjust the height. So far, I ha ...

htmlcssuser-interface

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Difficulties arise when trying to align text vertically between two floating images

After running the code, I noticed that the text "Text Here" is positioned at the bottom of the div instead of the top. I have attempted to adjust it using properties like vertical-align, padding, and margin-top within the .subText styling, but so far, I ha ...

jqueryhtmlcss

Passing a basic JavaScript variable to PHP using AJAX

Despite searching for solutions on how to transfer JavaScript variables to PHP, I have been unable to find one that suits my needs. The task at hand is to send three variables from JavaScript named title, body, and author to PHP. The body variable contains ...

javascriptphphtmlajax

When the page loads, does the browser automatically download mypic.jpg?

#feature1 { display: none; } #feature2 { background-image: url('mypic.jpg'); visibility: hidden; } <div id="feature1"> <span id="feature2"></span> </div> Kindly explain your response by providing a reason ...

htmlcss

PyScript <script type="py-editor"> Issue: SharedArrayBuffer cannot be used in an insecure environment

I am currently using PyScript to execute a basic Python script within my HTML file in order to show a pandas DataFrame. However, upon loading the page in the browser and attempting to run the code block by clicking the run button, I encounter an error rela ...

javascriptpythonhtmlpyscript

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

My web page includes several screenshots to illustrate the issue I am facing. One of my challenges is the scroll bar below the table, which I find displeasing. In an attempt to resolve this, I decided to adjust the lateral margins slightly. Here's a s ...

htmlcssspring-bootbootstrap-4