What is the best way to display a new row within a row in Bootstrap 4?

Struggling to design a header image with text positioned at the bottom? Despite creating rows and columns, the text keeps moving to a new line. I need to have two instances of text in the header image, but adjusting absolute position has not helped. I've also experimented with d-flex properties like align-items-end and justify content...

There must be a simple solution to this issue, I just need to find out how to ensure the text appears at the bottom.

How would you go about creating a header image like the example below?

Header Image

<div class="fluid-container" style="width: 100%">
  <div class="row" style="">
    <div class="col"> <img class="card-img-top" src="images/electrical-repair.png" width="100%" height="auto" alt=""/>
      <h4 class="text-danger d-flex justify-content-center bannerText text-center">Premiere Commercial Electrical Services in the Northwest</h4>
    </div>
  </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Check out this example that showcases a fusion of custom code with bootstrap elements. Feel free to adjust the size or switch to full screen mode for a better view.

body {
  padding: 0;
  margin: 0;
}

.full-home {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-position: 50% 50%\9 !important;
  background-size: cover;
  min-height: 100vh;
  position: absolute;
}

.hero-wrapper {
  position: relative;
  z-index: 1;
  height: 100vh;
}

.hero-wrapper-inner {
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.hero-wrapper-bottom {
  padding: 10px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');"></div>
<div class="hero-wrapper">
  <div class="container hero-wrapper-inner">
    <div class="row">
      <div class="col-md-12">
        <h1>Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="hero-wrapper-bottom">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </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

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap

Implementing a distinct approach to adding margins to div boxes using

Hello, I've been experimenting with the developer tools in Google Chrome to add margins to my navigation bar. The goal is to create gaps between the boxes. Any assistance would be greatly appreciated! http://jsfiddle.net/3jp1d0fe/8/ CSS div.contain ...

css

Tips for Preventing Ant Design from Overriding Existing CSS Styles

Currently, I am working on a ReactJS project. Initially, the entire project was designed using pure CSS. However, I decided to incorporate a small Antd component into my project. Following the provided instructions, I imported the component like this in on ...

cssreactjssassantd

utilizing the value within the useState function, however, when attempting to utilize it within this.state, the tab switching feature fails

I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...

javascripthtmlcssreactjsredux

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

cssasp.netasp.net-mvcstylesheet

The function element.innerHTML is invalid when trying to assign an object value as an option

Hey there! I'm currently working on a JavaScript project where I have an input that retrieves text from an array. Each option in the array needs to be linked to an object so I can utilize its attributes. const data = [ { name: "SIMPLES NACION ...

javascripthtmlcss

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

I don't understand why my BeautifulSoup code is throwing an attribute error even though the variable it's referring to is assigned a value

Currently, I am working with Python 3.9.1 along with selenium and BeautifulSoup to develop my first web scraper targeting Tesco's website. This is essentially a mini project that serves the purpose of helping me learn. However, upon running the code p ...

pythonhtmlseleniumbeautifulsoupattributeerror

The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...

javascriptjqueryhtmlsvg

jQuery effects move divs' margins consecutively

Check out my current setup I want to achieve a smooth image fade-in effect without any text displacement. Is there a specific alteration needed for the .fade-in element in order to accomplish this? ...

jqueryhtmlcss

Tips for avoiding the security risk of "A potentially hazardous Request.Form" in requests

After integrating a FreeTextBox control into my webpage, users can input HTML tags. However, upon submitting to the server, I encounter the following error: A potentially dangerous Request.Form value was detected from the client (GestisciPagine1_txtTest ...

c#.nethtmlsecurity

The negative z-index is causing issues with my ability to select classes using jQuery

By setting a z-index of -3 for several divs in my background, I thought they wouldn't affect the formatting of elements in the foreground. But now I'm facing an issue where I can't click on those background divs when trying to target them wi ...

javascriptjqueryhtmlcss

Adjust images, documents, and videos to fit seamlessly within an iFrame

I am currently working on an MVC project with a View named Index.cshtml. Within this view, I have a dynamically created iFrame where the HTML content is generated in a string and then appended to a div using .html(). The content of the iFrame changes based ...

htmliframe

Ways to prevent the TAB key from automatically shifting focus to the next element after using scrollIntoView during page initialization in the Chrome browser

Encountering a strange issue specifically on the Chrome browser. After the page loads, I am using the scrollIntoView method in the ngAfterViewInit of an Angular component. When the page loads and scrolls to the element, everything appears to be functioning ...

javascripthtmlangulargoogle-chromejs-scrollintoview

Creating unique identifiers and names for dynamically generated editable HTML table cells using JavaScript

Clicking the button will trigger the GenerateTable() function to dynamically create a table based on selected options from the drop-down menu as column headings. Below is the JavaScript code, along with instructions on how to assign IDs and names to each t ...

javascriptjqueryhtml

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

Learn how to customize button styles in ExtJS with the pressedCls configuration option

Is there a way to change the color when a button is pressed? I tried using the pressedCls config but it didn't work. How can I fix this issue or is there another method to set the CSS when a button is pressed? Thank you so much! Javascript: Ext.crea ...

javascriptcssextjs

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read

I recently delved into the world of "REACT" in order to work on the front-end of my own project. I encountered a problem for 2 days with the map function while getting data from my back-end and saving the IDs in the Cuartos array. I couldn't figure ou ...

javascriptjavahtmlajaxreactjs

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Can anyone help me understand the strange white border around my dropdown menu and guide me on how to remove it? I am currently using DropdownButton from react bootstrap. I have attempted to adjust the CSS with no success. Here is the code I tried: .Navig ...

cssreactjstypescriptsass

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

csstwitter-bootstrap