Achieving a full width vertical navigation on the left side using Bootstrap's grid system: a step-by

I am looking to design an admin panel using bootstrap. To start off, I want to create a navigation menu on the left side. However, I encountered an issue where my navigation menu with a red background does not stretch the full width of the left column. Here is the code snippet causing the problem:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-10">
      Content
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired layout, simply include the Bootstrap p-0 class

<div class="col-2 p-0">

Answer №2

Looking to make the red area cover the pink area? You'll need to modify the CSS framework for the 'col-2' class.

.override-class
{
padding-right: 0px!important;
padding-left: 0px!important;
}

Answer №3

If you find yourself only needing to modify the style of the class called col-2, you can opt for this inline CSS solution:

<div class="col-2" style="background-color:#f0f; padding-left:0px; padding-right:0px;">

Alternatively, if you need to make changes across all instances of the class, you can use the following:

.col-2{
  padding-right: 0px !important;
  padding-left: 0px !important;
}


.col-2{
  padding-right: 0px !important;
  padding-left: 0px !important;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>

    <div class="col-10">
      Content
    </div>
  </div>
</div>

Answer №4

Bootstrap 4.0.0-beta comes with a range of utility classes for margin, padding, gutter, vertical alignment, and more. Take a look at the code snippet below:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2 p-0" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>
    <div class="col-10">
      Content
    </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

Incorporating SASS/SCSS syntax within the <style> element

Can I include SASS/SCSS syntax directly in an .html file within a style tag? I'm interested in defining a variable within the .html file and then utilizing it in a .sass file. ...

htmlcsssass

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

Utilizing Bootstrap Table of Contents plugin: accessing the "$scope" object to incorporate additional headings

I'm having trouble implementing the Table of Contents plugin found here: I am struggling to figure out how to correctly call the $scope object in order to include h1 to h6 headings in the TOC. Currently, only h1 to h3 are showing up. Below is a snip ...

jquerybootstrap-4

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Flexbox positioning: Absolute element within a relative container

Having a div using display:flex and position:relative, I am looking to add an overlay element at the bottom of this div by applying position:absolute to it. Ideally, the height of the overlay should be auto, but it's not necessary. The issue arises wh ...

htmlcssflexbox

Is it possible to transfer data from a JavaScript file to the Express server without relying on a form submission?

As a newcomer here, I apologize if I overlook any best practices. Currently, I am in the process of developing a sudoku game using express, JavaScript, HTML, and mongoDb. My current challenge involves setting up a statistics system. My goal is to send da ...

javascripthtmldatabaseexpressejs

Ways to Retrieve the Text From the Selected Index in Datalist Element

I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...

javascripthtml

Having trouble running the npm script due to a multitude of errors popping up

I have encountered an issue while trying to run an npm script. I added the script in the `package.json` file multiple times, but it keeps showing errors. I am currently working on building a website and require npm sass for it. However, when I try to run t ...

htmlcssnpmsasscommand-prompt

Get the values of var1 and var2 from the URL in PHP, for example: `example.php?var1

Currently, a portion of my website operates by using GET requests to navigate to profiles or pages. However, I am concerned about the scenario where a user visits someone's profile page (requiring one GET) and then clicks on a sub-tab within that prof ...

phpjavascriptjqueryhtmlget

Ways to remove border when image is not present

I've been attempting to use JavaScript to hide the border, but it doesn't seem to be working. Is it possible to hide the border in HTML using Java? ......................... Check out my page here Here is a snippet of my HTML: <!-- Single P ...

htmlcss

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

htmlcss

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

How to specifically exclude a checkbox from the "select all" function in J

One way to select all checkboxes with HTML code: Select All <input type="checkbox" name='select_all' id='select_all' value='1'/> To achieve this with Javascript code: <script type="text/javascript> $(&apos ...

javascriptjqueryhtmlcheckbox

Retrieve the data file using input text with jQuery

Is there a way to extract data like this? data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9UeXBlIC9DYXR…AKdHJhaWxlcgo8PC9TaXplIDE4Ci9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjg4MzEzCiUlRU9G from an input file? $('#file').change(functio ...

jqueryhtmlfileinput

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

I am currently using the jQuery multiselect API in my application to allow users to select multiple values. However, I am facing an issue where I need to fetch all the selected values when a button next to the multiselect box is clicked. Unfortunately, I h ...

javascriptjqueryhtmlcss

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

javascriptphpjqueryhtmlajax

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...

javascripthtmlnode.jsvuejs2

Creating a Custom Alert Box in Javascript with Image Alignment

I have just finished creating a custom alert box using Javascript, complete with text and images. However, I am facing an issue with alignment. The output is not as expected. I am trying to display the correct mark and text on the same line. Can someone ...

javascriptjqueryhtmlajax

Issue with connecting the 'Enter' key to the button - no success

My current setup involves using jQuery to link the Enter key to an HTML button through this code snippet: $("#console").keyup(function(event){ if(event.keyCode == 13) { $("#submit").click(); } }); HTML: <input autocomplete="off" type= ...

jqueryhtmlbuttononkeyup