Having difficulties with building a HTML layout using Bootstrap functionality

I am struggling to recreate a specific view using Bootstrap. The image of the view I want to achieve can be seen here:

https://i.sstatic.net/VtaMc.png

My attempt at coding this view using Bootstrap is as follows:

<div class="col-md-12">
    <div class="col-md-2" style="background: #fff; border-right: 1px solid #e0e2e4;  height: 100vh;  ">
    </div>

    <div class="col-md-1" style="background: #e0e2e4; border-right: 1px solid #e0e2e4;  height: 100vh;  ">
    </div>

    <div class="col-md-9" style="background: #fff; border-right: 1px solid #e0e2e4;  height: 100vh;  " >
    </div>
</div>

Unfortunately, my attempt did not produce the desired result. Can anyone please provide guidance on how to properly create this view?

twitter-bootstrapcsstwitter-bootstrap-3

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body  style="background-color:#e0e2e4">
  <div class="row">
    <div class="col-md-12">
    <div class="col-sm-2"  style="background-color:#ccc;height:100vh;border-right: 1px solid #e0e2e4;">
      <h3>Left Column</h3>
      <p>Make changes here...</p>
      
    </div>
    <div class="col-sm-9">
      <div style="margin:10px;background-color:#ddd;height:100vh;border-right: 1px solid #e0e2e4;">
              <div class="panel panel-default">
      <div class="panel-heading clearfix">

<span class="pull-left panel-title col-xs-6"> Dashboard</span> 
<span class="pull-right">
<button type="button" class="btn btn-primary btn-xs">Account Setting</button>
</span>
</div>
      <div class="panel-body" style="padding:0px">
        <div class="row">
          <div class="col-md-12">
            <div class="col-md-8" style="border">
              Customized Content
            </div>
            <div class="col-md-4" style="border-left:1px solid #e0e2e4">
               <div class="panel panel-primary" style="margin:20px">
                  <div class="panel-heading">Panel with panel-primary class</div>
                  <div class="panel-body">Updated Panel Content</div>
                </div>
            <div class="panel panel-primary" style="margin:20px">
                  <div class="panel-heading">Panel with panel-primary class</div>
                  <div class="panel-body">Modified Panel Content</div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-1"  style="background-color:#eee;height:100vh;border-right: 1px solid #e0e2e4;">
      <h3>Right Column</h3>
      <p>Make changes here...</p>
      
    </div>
    </div>
  </div>

</body>
</html>

Feel free to customize the code in the left and right block as needed.

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

Unable to change background image using jQuery

Snippet: const imageUrl = 'img/star.png'; $("#venueId-"+nodeId).css('background','url("'+imageUrl+'") no-repeat top right'); This piece of code is the start of a function that triggers upon clicking. The goal is to ...

jquerycss

Press the Instagram Follow Buttons by utilizing Selenium with Java

click here for image description Hello, I am currently working on automating the process of clicking follow buttons using Java. However, I'm encountering difficulties when trying to use JavascriptExecutor within a for loop. Below is the code snippet ...

javacssseleniumxpath

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

jquerycsscookies

Using jQuery to properly align two tables

My challenge involves managing a large gridview within a scrolling container that has a fixed height. To prevent the header from scrolling along with the content, I placed the header in a separate section. This setup results in two tables - one inside the ...

jqueryasp.nethtmlcss

"Adding jQuery functionality: displaying images in a popup on the same

Greetings to everyone here, it's my first time posting but I've been following some posts from time to time. So, hello all! I have a quick question that I haven't been able to find the answer for online. I'm dismantling a template to u ...

jqueryhtmlcss

Center the text within the div and have it expand outwards from the middle if there is an abundance of text

I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code: &l ...

javascripthtmljquerycss

Ensure that the video continues playing from where the host left off instead of restarting from the beginning upon reloading

Is there a way to seamlessly stream a video from the host server on my website, so that it picks up exactly where it left off rather than starting from the beginning every time someone accesses the site? I want the video to remain synchronized with the o ...

javascriptphphtmlcssvideo

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

The background image causes the scrollbar to vanish

As a beginner, I am in the process of creating a web page that features a consistent background image. However, I have encountered an issue where the scroll bar does not appear on a specific page called "family details" due to the background image. I atte ...

javascripthtmlcssangular

Expand your view to avoid overflow

Take a look at this image When viewing with standard resolution (1386 x 788), everything looks fine. However, when attempting to zoom out in Internet Explorer, things get messy: Why does this happen and how can it be fixed? Here's the code causing t ...

htmlcss

Switching between dynamic Angular template classes

Creating an Angular HTML template with reactive form: <div class= "one"> <button class = "verticalButtonClass" (click) = "onClick()"> Label4 </button> </div> <div class = "two"> </bu ...

javascripthtmlcssangulartypescript

Experiencing a horizontal scroll while shifting the elements despite no visible overflow

While working on the contact section of my website, I encountered an issue. Every time I adjust the position of the textboxes and labels by 15em within the wrapper, a horizontal scroll appears. How can I move these elements without triggering the scroll ba ...

htmlcss

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

htmlcssbootstrap-4

The `@import` statement fails to load styles even when the URL is perfectly accurate

I am attempting to implement CSS styles. @import url("http://mydomain.com/theme/css/reset.css") However, it seems that the styles are not being applied. When I access through the browser, I can see all the CSS rules loading. What am I doing incorrectly ...

css

The CSS styling for the div element is not functioning properly despite my numerous attempts

I've been working on a website and I'm trying to ensure that all the main content fits within a 1068px wide container. I created a 'wrapper' div to hold the code, but styling doesn't seem to be applied correctly. I need a solution ...

htmlcss

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: https://i.sstatic.net/IVdz8.png I am not certain if this ...

cssflexbox

The drop-down menu appears to be falling behind the 'content' div element

Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but ...

javascriptjqueryhtmlcss

displaying a video within an iframe without occupying the entire screen

After successfully implementing a fullscreen video background using the "video" tag with a video hosted on my own server, I decided to switch it out for a Vimeo video. However, after making the necessary code and CSS changes, the video now appears like thi ...

htmlcssbootstrap-5embed

Steps for setting up ngx-bootstrap version 7.0.0 in Angular 11

I am currently using ngx-bootstrap 5.x.x in my Angular 8 project. However, after migrating my Angular version from 8 to 11, I have encountered issues with the dropdown component. It does not open on the first click. I have been advised to use version 7.0.0 ...

angulartwitter-bootstrapngx-bootstrap

The alignment of circles and balls is steady, with no bouncing in sight

How can I place a large circle in the center of the screen and four smaller circles on the right side? The small circles should have bouncing balls inside, each with only one ball instead of multiple. An alert should be triggered by the main big circle but ...

javascripthtmlcsscanvas