Creating horizontal bars using div elements with no content

Is there a way to create two divs using Bootstrap 4, one with content and the other empty as shown in the wireframe example below?

This is my attempt:

<div class="icons_div">
  <div class="row">
    <div class="col-sm-2"> 
      <div class="icon">
        <i class="fa fa-circle"> </i>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="icon"> <i class="fa fa-circle"> </i></div>
    </div>
    <div class="col-sm-2">
      <div class="icon"><i class="fa fa-globe"> </i> </div>
    </div>
    <div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
    <div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
    <div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
  </div>
</div> <br> <br>

Here's my revised code based on feedback:

CSS: .icon-bar { width: 100%; background-color: black; overflow: auto; align-items: center; } .icon-bar a { float: left; text-align: center; width: 20%; padding: 12px 0; transition: all; color: white; font-size: 36px; }

.icon-bar a:hover
{
  background-color: #000;
}
.active
{
  background-color: #4CAF50;
}

.icons_div
{
  margin: 0px auto;
  width: max-content;
}

.icon
{
  margin: 0px auto;
  width: 15px;
  display: initial;
}

.fa
{
  padding: 0px 10px;
}

HTML:

<div class="container-fluid">
    <div class="icons_div">
        <div class="row bg-secondary">
            <div class="col-sm-2"> 
                <div class="icon">
                    <i class="fa fa-circle"> </i>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="icon"> <i class="fa fa-circle"> </i></div>
            </div>
            <div class="col-sm-2">
                <div class="icon"><i class="fa fa-globe"> </i> </div>
            </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
        </div>
    </div>
    <div class="row">
        <div class="col bg-dark" style="height: 40px;"></div>
    </div>
</div> <br> <br>

View Wireframe of Divs

Output from Revision: https://i.sstatic.net/hfA4r.jpg

htmlcssfrontendbootstrap-4web-frontend

Answer №1

If that's the case, you can simply apply the bg-secondary class to the first row for a grey background color. Then, add a second row-column pair below and assign the bg-dark class to the empty column, along with style="height: 40px;" to set the desired height.

Check out the code snippet below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="icons_div">
        <div class="row bg-secondary">
            <div class="col-sm-2"> 
                <div class="icon">
                    <i class="fa fa-circle"></i>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="icon"><i class="fa fa-circle"></i></div>
            </div>
            <div class="col-sm-2">
                <div class="icon"><i class="fa fa-globe"></i></div>
            </div>
            <div class="col-sm-2"><div class="icon"><i class="fa fa-search"></i></div></div>
            <div class="col-sm-2"><div class="icon"><i class="fa fa-home"></i></div></div>
            <div class="col-sm-2"><div class="icon"><i class="fa fa-trash"></i></div></div>
        </div>
    </div>
    <div class="row">
        <div class="col bg-dark" style="height: 40px;"></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

Completed Animation with Callback in AngularJS CSS

Currently working with AngularJS and hoping to receive a notification upon completion of an animation. I am aware that this can be achieved with javascript animations such as myApp.animation(...), but I'm intrigued if there is an alternative method wi ...

javascriptcssangularjsanimation

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

javascriptjqueryhtmlcssangularjs

Adjust the width of a child element to be within the bounds of its parent's width and maximum width

I am looking to create a CSS menu with specific constraints: The height and width of the parent <div> are variable The number of <li> elements is unknown The <ul> must be at least as wide as the <div> Each row of <li> should ...

htmlcss

"Dynamic navigation bar that remains in place even while scrolling past Adsense advertisements

Looking to implement a sticky menu for my blog using jQuery. The menu is functioning as desired, however, the issue arises when I scroll down on a page that contains adsense - the menu ends up going under the ad. What could be causing this problem? Below ...

jqueryhtmlcss

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...

javascriptjqueryhtml

Using PHP to display arrays on the screen

Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...

phphtmlarraysmatrix

Incorporate a variable from an HTML form into PHP for FPDF functionality

How can I retrieve a variable from an "input" element in another HTML file? <input type="text" id="client" name="clientTest" required minlength="1" maxlength="30" size="30"> I need to pass this variable to my PHP file for FPDF. It seems like I hav ...

phphtmlvariablesfpdfvar

Tips for setting up Greasemonkey to automatically click on an unusual link on a particular website

I'm not a master coder by any means; I can handle some scripts but that's about it. Treat me like a total beginner, please! ;-) I want to automatically expand two specific links on a webpage using a GM Script. On a French dating site in the prof ...

javascripthtmlhyperlinkclickgreasemonkey

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

Struggling to customize checkbox design using HTML and CSS

Why am I unable to style HTML checkboxes with CSS? No matter what I try, the appearance of the checkboxes remains unchanged: Here is the HTML code: <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /> <nput type="checkbox" id ...

javascripthtmlcsscheckbox

The disablement of the button is a result of concealed select elements

I'm facing an issue with a form that contains three select options: Fit Colour Size By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour). There are mul ...

javascriptjqueryhtmlcss

Utilizing jQuery to Print a Div's Content Along with its CSS styling

Looking for a way to include CSS styles when using this function in my Wordpress plugin that utilizes jQuery to print content from a specific div with the "table_disp" class. function pop_print(){ w=window.open(null, 'Print_Page', 'scro ...

jquerycsshtmlprinting

Leveraging Java jsoup for extracting information from an HTML page and saving the data

Attempting to utilize the jsoup libraries for parsing an HTML file and extracting all data associated with table class="scl_list", a segment within the larger HTML document. <table class="scl_list"> <tr> <th align="cente ...

javahtmlparsingjsouphtml-parsing

Is there a way to stop text from being selected when double clicking?

#btnLeft{ width:40px; padding:2px 5px 2px 5px; background-color: #20a0a0; border: thin solid #099; border-radius:7px; text-align:center; font-family:"Futura Md BT"; font-size:large; color:#FFF; } This particular code sn ...

htmlcsstextdouble-click

What are some alternatives to tables for displaying two lines of headings and corresponding data?

Here is a snippet of HTML code I am working with: <div><span class='top'>Answered</span></div><div id="hour">15</div> <div><span class='top'>Not Answered</span></div ...

htmlcss

Is there a way to embed a JS media query inside the sticky navbar function for both the onscroll and onclick events?

I've been exploring media queries in JavaScript, and it seems like they work well when the window is resized. However, when nested within onscroll and onclick functions, things start to get a bit tricky. If you run the following code and resize the w ...

javascripthtmljquerycss

Adding an automatically generated link within an HTML form

I am working on a web page that displays dynamic content and includes a form for user submissions. How can I add a unique reference to each of these pages within the form? <div class="detalle-form-wrap"> <div> <h1> ...

javascriptjqueryhtmlforms

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

htmlcsscss-animationscss-transforms

Transform HTML table data into XML format

My challenge is to transform an HTML table into XML format using pure JavaScript without the use of jQuery or any other libraries. I have found plenty of tutorials on converting XML to HTML, but none on how to go in the opposite direction without resorting ...

javascripthtmlxml

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

htmljsonnode.jsmongodbmongoose