The alignment of the div on the project page is not correct

I am seeking help to align the entire .main class, which starts with "dashboard," properly at the top of the page next to the sidebar. Currently, its alignment appears below the sidebar.

Here is a visual representation of my current page layout: https://i.sstatic.net/Zp5Av.png Desired look for the page: https://i.sstatic.net/bgcoy.png

body{
        font-family: 'Rosario' ;
 
}

.sidebar{
    margin:10px -8px 20px 20px; 
}

.sidebar>li>a{
    padding:  20px 20px;
}

.main{
    margin-top: 5px;
    
    padding: 20px;
    
}

.placeholders{
    margin-top: 10px;
    margin-bottom: 30px;
}

.placeholder{
    margin-bottom: 20px;
}

.placeholder img{
    display: inline;
    border-radius: 50%;
    
}

body, .sticky-footer-wrapper {
   min-height:100vh;
}

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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/adminboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
    <link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">

    </head>
<body>
<title>Admin Dashboard</title>


<!--navbar starts here-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
  <a class="navbar-brand" href="#">Admin Dashboard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item"><a class="nav-link" href="#"><i...

javascripthtmlcsswebbootstrap-4

Answer №1

Your HTML code has an issue. The row should contain both the Dashboard and the left column elements: 

      <ul class="nav flex-column sidebar">
        <li class="nav-item"><a class="nav-link active" href="#"><i class="fas fa-chart-area"></i> Old Reports</a></li>
        <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-dollar-sign"></i> Revenues</a></li>
        <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-globe"></i> Countries</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
      </ul>
    </div>
  </div> <-------------------- This closing div is misplaced, it should be at the end of the upcoming div
  <div class="col-sm-9 col-md-10 main">
    <h1 class="page-header"><i class="fa fa-tachometer" aria-hidden="true"></i>
      Dashboard</h1>


body {
  font-family: 'Rosario';
}

.sidebar {
  margin: 10px -8px 20px 20px;
}

.sidebar>li>a {
  padding: 20px 20px;
}

.main {
  margin-top: 5px;
  padding: 20px;
}

.placeholders {
  margin-top: 10px;
  margin-bottom: 30px;
}

.placeholder {
  margin-bottom: 20px;
}

.placeholder img {
  display: inline;
  border-radius: 50%;
}

body,
.sticky-footer-wrapper {
  min-height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/adminboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
<link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">

<title>Admin Dashboard</title>


<!--navbar starts here-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
  <a class="navbar-brand" href="#">Admin Dashboard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="SupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>


    <

https://jsfiddle.net/9kp8dqcu/

Answer №2

It appears that you have mistakenly positioned main outside the .row, causing alignment issues:

body{
        font-family: 'Rosario' ;
 
}

.sidebar{
    margin:10px -8px 20px 20px; 
}

.sidebar>li>a{
    padding:  20px 20px;
}

.main{
    margin-top: 5px;
    
    padding: 20px;
    
}

.placeholders{
    margin-top: 10px;
    margin-bottom: 30px;
}

.placeholder{
    margin-bottom: 20px;
}

.placeholder img{
    display: inline;
    border-radius: 50%;
    
}

body, .sticky-footer-wrapper {
   min-height:100vh;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/adminboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
    <link href="https://fonts.googleapis.com/css?family=Rosario&amp;display=swap" rel="stylesheet">
</head>

<body cz-shortcut-listen="true">
    <title>Admin Dashboard</title>

    <!--navbar starts here-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
        <a class="navbar-brand" href="#">Admin Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
//more code to remian as it is     
</body>

</html>

Answer №3

It seems like you prematurely closed the row element...

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            ...
        </div>
        <div class="col-sm-9 col-md-10 main">
           ...
        </div>
    </div>
</div>

Check out the correct implementation here

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

Adding the target='_parent' attribute to the infowindow of a Google Fusion Map by utilizing a click event listener

As someone who is relatively new to Google Fusion, I am eager to expand my knowledge and skills. Recently, I created a customized map with an infowindow and embedded it onto my website using the FusionTablesLayer Wizard. I wanted to avoid using the target= ...

htmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Firefox experiencing issue with Ajax form submission

Hey there, I'm encountering an issue with the code below not functioning correctly and completely in Firefox. It should display a message (loading, check errors) from the server after clicking submit, but in Firefox it just performs a regular submit w ...

javascriptjqueryhtmlajaxfirefox

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Having an issue with my social icons on the top of my website displaying unwanted symbols in Android 2.3. Can't figure out the cause even after ruling out <a> tags and associated CSS. Any thoughts on what the problem might be? I've remove ...

androidhtmlcss

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

javascriptjqueryhtmlcssjquery-plugins

How to ensure the footer stays at the bottom of the page even when the Treeview control expands

Greetings Everyone! I'm facing an issue with keeping the footer pinned at the bottom of the page. The treeview control I'm using overlaps the footer when expanded. Can anyone assist in ensuring the footer remains at the bottom of the page? < ...

cssasp.netbootstrap-4footer

Transform a hierarchical array data structure into a one-dimensional array structure

Seeking a solution to transform this array of nested objects into a flat array for easier manipulation. [ { "name": "bill", "car": "jaguar", "age": 30, "profiles": [ { "name": "stacey", "car": "lambo", "age" ...

javascriptarraysrecursionunderscore.jslodash

Leveraging JSON.stringify within an Angular2 template to enhance functionality

Looking for a simple way to check if two objects are different and then display an element by adding a class name? Here is the expression: <div ngClass='{{JSON.stringify(obj1) != JSON.stringify(obj2) ? "div-show" : ""}}'></div> Enco ...

htmlangular

Can an Angular app be developed without incorporating bootstrap?

Can an Angular application be built using only material design without relying on bootstrap? What are the pros and cons of taking this approach? ...

bootstrap-4angular-materialangular6

Adjust the styling of CSS classes within an ExtJS application

I've been trying to customize the appearance of my calendar panel using extjs. In my EHR application, I have implemented the extjs calendarpanel and datepicker similar to the setup showcased in this link: When a date is selected from the datepicker a ...

cssextjs3

Transferring API information into a nested array and displaying the outcome

Currently, I am utilizing an API to fetch an array of users from which I sort them and collect those with a personalTrainerId matching my userId into an array. The ultimate goal is to render these users as cards on the interface. The desired format for th ...

javascriptarraysreactjsjson

Sidebar organization with nested subdirectories for relative URIs

I recently created a website with subfolders and a sidebar containing the navigation menu. However, I encountered an issue where all links within the subfolders were referencing the current folder instead of the root directory. Even using the tilde symbol ...

htmlasp.net.net

Customizable Data Tables for Users

In my project, I am utilizing the Datatable library to display a table with 20-25 columns. Is there a feature in Datatable that allows users to customize which columns they want to hide and display? Here is how I have set up my Datatable: $("#datatable-b ...

javascriptjquerydatatable

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

javascriptnode.jsnpm

Using React.js to compute dates based on user-inputted dates

Today was dedicated to tackling the coding challenge of creating a function. I'm currently working on a react app using the PERN stack. The form I'm working on includes multiple date inputs, with two date columns and a total days column. My goal ...

javascriptreactjs

An array containing HTML elements

I need help creating an array of HTML elements: For example: <div class="class"><div class="class2">Some text here</div></div> Here is the array setup: $arr = array('div' => array('class' => 'class ...

phphtmlarrays

The error message "TypeError: Unable to access the country_code property of a null value" is caused by

I am currently utilizing React to display a table that is populated based on data retrieved from an API call returning JSON format. The issue I am encountering is a TypeError due to the inability to read the location object, and despite my efforts, I have ...

javascriptreactjsjsx

What is the reason for having two scroll bars and how can I eliminate one of them?

Is there a way to remove one of the two vertical scrollbars on my webpage? Lorem ipsum is included for testing purposes. Apologies for the content being in another language. * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x ...

htmlcssscrollbar

What is the method of locating the default export reference of a file in Visual Studio Code?

Is it possible to locate the reference file that is exported by default in Visual Studio Code? The key shortcut to find all references in VSCode is: alt + shift + f12. For instance, consider finding data.js. async function update(req, res) { res.render ...

javascriptnode.js