Tips for maintaining a border between divs in a bootstrap layout

I have a box positioned on the left side of the screen and a large div element placed adjacent to it. I am looking to enclose both of these elements within a square-shaped border in a light color. How can I achieve this effect? Additionally, I have included the style of a progress bar in case it provides any helpful insight. I am specifically interested in creating a bordered box that encapsulates the progress bar circle with shading. It should be noted that I am utilizing Bootstrap version 4 for this project.

View an example of the desired border design here.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">

                    <div class="col-md-3">
                                        <span class="border">

                        <br><br><br>
                        <div class="progress blue">
                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>
                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>
                            <div class="progress-value">90%</div>
                        </div>
                                        </span>
                </span>
                <br><br>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            List group item heading
                        </h4>
                        <p class="list-group-item-text">
                            ...
                        </p>
                    </div>

                    <div class="list-group-item justify-content-between">
                        Help <span class="badge badge-secondary badge-pill">14</span>
                    </div> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </div>
            </div>
            <div class="col-md-9">
                <br><br><br><br><br><br> <br><br><br>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="">Brief Information</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Education</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
                    </li>
                </ul>
                <form role="form">
                    <div class="form-group">

                        <label for="exampleInputEmail1">
                            Email address
                        </label>
                        <input type="email" class="form-control" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputPassword1">
                            Password
                        </label>
                        <input type="password" class="form-control" id="exampleInputPassword1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputFile">
                            File input
                        </label>
                        <input type="file" class="form-control-file" id="exampleInputFile" />
                        <p class="help-block">
                            Example block-level help text here.
                        </p>
                    </div>
                    <div class="checkbox">

                        <label>
                            <input type="checkbox" /> Check me out
                        </label>
                    </div> 
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </form>

            </div>
        </div>
    </div>
</div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

By simply incorporating a few lines of CSS, I believe this will provide some assistance. Thank you

.light-border {
   border: 1px solid #ccc;
}

Next, include light-border within 

<div class="row light-border">
.

.light-border {
    border: 1px solid #ccc;
}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row light-border">

                    <div class="col-md-3">
                                        <span class="border">

                        <br><br><br>
                        <div class="progress blue">
                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>
                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>
                            <div class="progress-value">90%</div>
                        </div>
                                        </span>
                </span>
                <br><br>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            List group item heading
                        </h4>
                        <p class="list-group-item-text">
                            ...
                        </p>
                    </div>

                    <div class="list-group-item justify-content-between">
                        Help <span class="badge badge-secondary badge-pill">14</span>
                    </div> <a href="#" class="list-group-item list-group-item-action active justify-content-between">Home <span class="badge badge-light badge-pill">14</span></a>
                </div>
            </div>
            <div class="col-md-9">
                <br><br><br><br><br><br> <br><br><br>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="">Brief Information</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Education</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
                    </li>
                </ul>
                <form role="form">
                    <div class="form-group">

                        <label for="exampleInputEmail1">
                            Email address
                        </label>
                        <input type="email" class="form-control" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputPassword1">
                            Password
                        </label>
                        <input type="password" class="form-control" id="exampleInputPassword1" />
                    </div>
                    <div class="form-group">

                        <label for="exampleInputFile">
                            File input
                        </label>
                        <input type="file" class="form-control-file" id="exampleInputFile" />
                        <p class="help-block">
                            Example block-level help text here.
                        </p>
                    </div>
                    <div class="checkbox">

                        <label>
                            <input type="checkbox" /> Check me out
                        </label>
                    </div> 
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </form>

            </div>
        </div>
    </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

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

htmlcssiframe

SVG utilizes a distinct color for every individual path

I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...

csssvgpath

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

Can the URL of a static HTML be altered without modifying the file name?

Is there a method to modify the URL of an HTML file without altering its filename? For example, if my website has a page named 1.html, is it possible to show it as mypagename.html to both visitors and search engine crawlers? ...

html

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...

javascripthtmlcssweb

Stripping CSS prefixes upon file initialization

When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...

javascriptcssexpressreplace

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

Having trouble getting SCSS to function properly? (Updated Code)

Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS ...

htmlcsssass

Why am I unable to view the image in the material-ui-next "Cards" example?

I came across this example on the material-ui-next website, but strangely I am unable to view the lizard image when I try to run it on my computer. Why is the image not showing? There are no errors in my console, and the "simple card" example on the websi ...

htmlcssreactjsmaterial-ui

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

javascripthtml

What is a way to create a colored <hr> element without increasing its height at all?

I'm facing a dilemma - I created an hr element and it's currently grey, but I want to change the color to black. The issue is that when I do this, it appears thicker and ruins the overall styling of my page. Does anyone have any ideas on how I ca ...

htmlcssgoogle-chrometags

Issue with collapsing custom-height navigation bar in Bootstrap 4

I have implemented a Bootstrap 4 navbar with a brand logo image sized at 150px x 33px. Now, I want to increase the height of the navbar to 80px. To do this, I added min-height: 80px; in my CSS. <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapbootstrap-4

Interactive dropdown menu with options for different actions

They say a picture is worth a thousand words. I have an idea for a feature I want to add to my Django web application: I want to create a dynamic dropdown list that allows users to add values to the database and dynamically updates itself with the new sel ...

htmlajaxdjangodrop-down-menudjango-forms

The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure: <Paper> <List> .. </List> </Paper> One issue I am facing is that when the list is scrolled, the ...

cssreactjsmaterial-ui

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

csshtml

Obtain the text value from an HTML button in JSP code

Here is an HTML tag that I have: <button type="submit" name=<%=s %> value=<%=s %>><%=s%></button> The <%=s %> represents a String with white spaces stored on the server, such as "file one". I am facing an issue with e ...

javahtmljsp

How can I ensure that I am only retrieving the first object within a "for loop" in vuejs and returning its value without getting the rest?

Why am I only able to retrieve the value of the first object in my "for loop" and not all three values as intended? var app = new Vue({ el: '#app', data: { myObj: [ {name: 'Hello', age: 10}, {name: ...

javascripthtmlfor-loopvue.js

Prevent the crawling of HTML segments by utilizing HTML-XSL parsing techniques

I am currently working with Watson Explorer FC 11.0.2 and I am facing a challenge in excluding certain HTML tags from the Watson crawlers. I am using an XSLT parser to extract metadata, title, and body from an HTML page located at the following path: "/h ...

htmlxmlxsltibm-watsonwatson-explorer

Looking to retrieve the values of a 3-level dropdown using ajax. Successfully fetched the value of the 1st dropdown, but unsure of how to retrieve the values of the 2nd and

I have successfully managed to retrieve all values, but when the 2nd and 3rd drop-downs are populated through Ajax, how can I access those values? I am looking for a way to fetch the values of the 2nd and 3rd drop-down without resorting to session variable ...

phpjqueryhtmlajax