Bootstrap 3 design with a full screen layout featuring three columns

I'm currently working on developing an administration dashboard for an application, and I require a layout that resembles the following:

---------------------------------------------------------------------------------
|                                                                               |
|                              NAVBAR                                           |
---------------------------------------------------------------------------------
|        |                                                  |                   |
|   N    |                                                  |                   |
|   A    |                                                  |                   |
|   V    |                                                  |                   |
|   I    |                                                  |                   |
|   G    |                                                  |                   |
|   A    |                                                  |                   |
|   T    |                      MAIN VIEW                   |       SUB         |
|   I    |                                                  |       VIEW        |
|   O    |                                                  |                   |
|   N    |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
---------------------------------------------------------------------------------

I aim to have both the width and height occupy 100% of the entire viewport. My initial attempt involved using .navbar-fixed-top to make the top navbar stay in place, implementing position: absolute for the side navigation bar, and specifying fixed heights for the main and sub views through media queries depending on screen size. However, I am now seeking a more efficient and neater solution. What would be the best way to achieve this type of layout?

htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout

Answer №1

By implementing a straightforward approach, you can achieve the desired outcome easily. The media query utilized in the CSS code allows the nav, main, and sub views to adjust their height to auto, especially when collapsing for xs viewports.

Check out the DEMO here

CSS:

html, body {
   height: 100%; 
}
.container-fluid.content {
    padding-top: 50px;
    height: 100%;
}
.container-fluid.content>.row {
    height: 100%;
}    
.mainview, .navview, .subview {
    height: 100%;
    overflow: auto;        
}
.navview, .subview {
    background-color: #eee;        
}         

@media (max-width: 767px) {
    .mainview, .navview, .subview {
      height: auto;   
    }
}

Basic HTML Structure:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>
<div class="container-fluid content">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-sm-2 navview">
      <h2>Navigation</h2>
    </div>
    <div class="col-sm-7 mainview">
      <h2>Main View</h2>
    </div>
    <div class="col-sm-3 subview">
      <h2>Sub View</h2>
    </div>
  </div>
</div>

Answer №2

Introducing a unique Rails gem titled Leather, this innovative tool offers components integrated into Bootstrap which can assist in crafting the desired layout. By incorporating a .navbar-static-top element into the sample layout featured on , you should be able to achieve a design closely resembling your vision.

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

Ways to display HTML elements depending on the width of the window

Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...

phphtmlcsssassbootstrap-4

Unable to establish connection between Router.post and AJAX

I am currently in the process of developing an application to convert temperatures. I have implemented a POST call in my temp.js class, which should trigger my ajax.js class to handle the data and perform calculations needed to generate the desired output. ...

javascripthtmlnode.jsajaxexpress

Having trouble getting my floating divs to stay centered within my container using CSS, even after removing float: left

Struggling to get CSS working correctly? I'm having an issue with a display panel that shows 1-4 cells with text/image in each row. Everything works fine with at least four cells, but when there are less than 4 (display=none), the cells align to the l ...

htmlcssalignment

ajax request sends data to php file, which then processes the data and sends it back using $_POST

Currently, I am in the process of developing a budget management application using a combination of HTML, Javascript, and PHP. The main objective is to allow users to input data into a database through a form interface. To achieve this functionality, I hav ...

javascriptphpjqueryhtmlajax

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Manipulate input fields dynamically with JavaScript

I am currently working on a functionality that involves generating an alert button based on a selection from a drop-down menu. The JavaScript part of the code is able to successfully read and send the values from the <select> drop-down as intended. H ...

javascripthtmldom

What is the reason the picture was not successfully duplicated into the directory?

I am currently utilizing Ajax and PHP in my project. I am trying to implement a functionality where I can upload an image without having to click the submit button. I found a solution mentioned in this answer: How to upload file using jquery ajax and php ...

phpjqueryhtmlajax

What are some strategies modern internet browsers use to address Sub-Pixel Issues in CSS?

In a vintage article dated from 2008 by the renowned John Resig, the challenges of sub-pixel rendering in older browsers were discussed. An interesting scenario was presented where 4 floated divs, each with a width of 25%, were contained within a parent di ...

css

Elements appearing distorted in Firefox and Internet Explorer

I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages. While it displays perfectly on Chrome, it appear ...

htmlcssresponsive-designcross-browsercss-position

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

Show two spans, each underneath the other

I am looking to showcase two span elements, one below the other. Take a look at my HTML code snippet <img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? que ...

htmlcssangularjsimagefrontend

When creating a PDF from HTML using iText, the CSS styling is not applied

Even though I am able to generate a PDF from an HTML string, the issue is that it doesn't apply the CSS styles. How can I create a PDF with CSS styling? Please assist! I have already attempted using CSSResolver. Below is my code snippet: {String res ...

javahtmlcsspdfitext

Creating extensive pianoroll visualization using HTML and JavaScript

Currently, I am focusing on developing an HTML5 audio application utilizing the latest Web Audio API, and I require a "pianoroll" feature. This is essentially a keyboard grid where users can draw notes, similar to what is seen in many music production soft ...

javascripthtmlcanvashtml-table

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

I encountered an issue where my style.css file was not properly linking to my HTML code. Whenever I saved the file, it would open

I'm a beginner in the world of HTML/CSS. When I save my style.css file, it shows up as a Notepad+ settings file and doesn't seem to work with my HTML. Can anyone advise me on what steps I should take? ...

htmlcss

When hovering over the label area, the entire rectangle will be highlighted

Could someone please assist with highlighting the entire row of the parent for the drop down feature? In the given scenario, level1 and level23 should be highlighted like the child items are. The goal is to highlight the entire row with the entire width. ...

javascriptjqueryhtmlcss

Animate custom scrollbars with jQuery for a unique browsing experience

I am experimenting with creating a scrolling animation using mCustomScrollbar Currently, I have managed to obtain the current scrollTop and animate it to a specific height using the code below: $("#content").mCustomScrollbar({ scrollButtons:{ ...

jqueryhtmlcssscrollermcustomscrollbar

Learn the method of centering flexbox vertically by using the flex-wrap property with the value

enter image description here I am currently working on a to-do list project. Whenever I add a folder, it appears vertically aligned. (click the /Bottom bar/ button -> it will display a folder in the /Homecomponent/) Each new folder I add goes further ...

cssreactjsflexbox

Effortlessly glide to a specific element on an HTML page

I am working with XML data that contains a lot of Test information. I am using XSLT to display this data as HTML in a web browser. Each test includes a table with the test steps, and every time a test is executed, the table updates to show whether each s ...

javahtmlxmlxslt

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

I have a set of items like this: I am trying to replicate the functionality of a file explorer in terms of item selection. To clarify, I aim to create a feature where hovering over an item and left-clicking it would generate a virtual rectangle to select ...

javascriptjquerycss