Include an icon in the header of a jumbotron

Here is the jumbotron configuration I am working with:

https://i.stack.imgur.com/JQGpA.png

This jumbotron was generated using the following code:

<div class="col-sm-2">
      <div class="jumbotron jumbotron-fluid top-space">
        <div class="container">
            <h1 class="display-6">Initiatives</h1>

            <p class="lead">Some more text.</p>
            <ul>
                <li>
            <a href="">Start an Initiative &#187;</a></li>
                <li>
            <a href="">More Information &#187;</a></li>
            </ul>
        </div>
    </div>
    <div class="jumbotron jumbotron-fluid top-space">
        <div class="container">
            <h1 class="display-6">News</h1>
            <p class="lead">Description of the news item. <br> Engaging users from first to sixth interaction.</p>
            <a href="">Try it out &#187;</a>
        </div>
    </div>
</div>

I would like to add an icon within the red square and align it with my h1 element, display-6. Is there a way to accomplish this?

htmlbootstrap-4

Answer №1

.col-sm-2 > div:first-child .display-6::after{
  content: "" ;
  width: 40px;
  height: 40px;
  background-color: red;
  display: block;
  margin-left: 20px;
}
.col-sm-2 > div:first-child .display-6{
 display: inline-flex;   
}
<div class="col-sm-2">
        <div class="jumbotron jumbotron-fluid top-space">
          <div class="container">
              <h1 class="display-6">Initiatives</h1>
  
              <p class="lead">The other good stuff.</p>
              <ul>
                  <li>
              <a href="">Start an Initiative &#187;</a></li>
                  <li>
              <a href="">More Information &#187;</a></li>
              </ul>
          </div>
      </div>
      <div class="jumbotron jumbotron-fluid top-space">
          <div class="container">
              <h1 class="display-6">News</h1>
              <p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
              <a href="">Try it out &#187;</a>
          </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

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

javascripthtmlcss

Experience the full functionality of Google Maps API without the need for jQuery or PHP with PanTo

I'm not a developer and I find myself stuck in the panTo() function. All I want is to execute this function with an if-else statement without having to reload the Google Map or using jQuery. <body> <div id="map"></div> <d ...

javascripthtmlcss

Obtaining gender information by utilizing checkboxes in Angular 7

I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...

htmlangulartypescript

Accessing array values depending on DOM response

Generate a string from selected DOM elements I have an object that contains months and their corresponding index numbers (not dates) monthList = {"jan" : "1", "feb" : "2". etc: etc} The user can input values like jan or jan,feb,march and I need to return ...

javascripthtmlloops

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

Node.js application for changing attributes in an HTML string

Within my node.js backend, there exists an object with a specific property named content, which stores an HTML string. The content within includes an img tag that currently has a src attribute containing a base64 string. I am seeking to modify this src att ...

javascripthtmlnode.js

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

javascriptjqueryhtmlajax

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

javascripthtmlcss

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

javascripthtmlcss

Utilizing Angular 2 for dynamic CSS binding: manipulating style.width and style.height properties

I am experiencing some unusual rendering issues when using plain HTML5 canvas and CSS binding with A2. Can anyone please explain the difference between the following code snippets: <canvas height="400" width="1200" #background> </canvas> AND ...

csshtmlangularcanvashtml5-canvas

Identifying a Resizable Div that Preserves its Aspect Ratio During Resizing

Below is the HTML code snippet I'm working with: <div id="myid_templates_editor_text_1" class="myid_templates_editor_element myid_templates_editor_text ui-resizable ui-draggable" style="width: 126.79999999999998px; height: 110px; position: absolut ...

javascriptjqueryhtmlcssjquery-ui

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

javascripthtmlcssforms

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

Extract a specific pattern from a string using Javascript

Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...

javascripthtml

HTML button failing to connect with CSS stylesheet

I am currently teaching myself CSS and using W3schools for guidance. Recently, I added a button to my website that redirects users to another page upon clicking. Everything functions correctly, but now I want to style the button using CSS. However, despit ...

htmlcss

Struggling with CSS button hover effect: can't get border and background change to work

Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...

htmlcssbutton

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

javascripthtmlcssreactjs

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

javascriptphphtmlcssimage

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

c#jqueryhtmlhtml5-canvasgetusermedia