Creating a dynamic overlay div on responsive block columns using Bootstrap

I am currently working on creating a responsive webpage with 4 blocks using rows and columns, each featuring an image background with an overlay and title. Everything is functioning as expected except for the width of the overlay.

My issue can be better understood through this image, where the left column fills up entirely from left to right, while the right column seems to be missing the full width on both sides.

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

HTML

<div class="wrapper">
    <div class="row" id="rows">
        <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
            <div id="portfolio-overlay" class="titlePush">Portfolio</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
            <div id="tools-overlay" class="titlePush">Tools</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
            <div id="about-overlay" class="titlePush">About</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
            <div id="contact-overlay" class="titlePush">Contact</div>
        </div>
    </div>
</div>

CSS

html,body,.wrapper {
    height:100%;
    width:100%;
}

#rows {
    height: 30%;
    font-family: 'Poiret One', cursive;
    font-size: 24px;
    color: white;
}


.portfolio {
    height: 100%;
    background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
    -webkit-background-size:;
    background-size: cover;
    background-position: center;
}

/* Portfolio Overlay Block */
#portfolio-overlay {
    background: rgb(0, 0, 0); /* fallback color*/
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    max-width:100%;
}

Demo: JSFiddle

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

In the Bootstrap framework, by default, the col-*-* classes have padding applied to them. You'll need to reset this padding if you don't want it. Additionally, make sure you include the .container class to avoid having a horizontal scrollbar.

Note: The .text-center class is used here to reset the padding for simplicity, as it's applied within the same element that uses the .col-*-* class.

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
 body {
  font-family: 'Poiret One', cursive;
}
html,
body,
.wrapper {
  height: 100%;
}
/* Header/Jumbotron Section */

.header {
  height: 40%;
  background-color: red;
}
/* Jumbotron Font Styling & Size */

.headFont {
  font-size: 10vh;
  color: white;
  text-decoration: underline;
  text-align: center;
  top: 15%;
}
/* Sets hyperlink color */

#rowLink {
  color: white;
}
/* Pushes box titles down */

.title {
  padding-top: 40px;
}
/*****************************************
            Content Blocks 
******************************************/

/* Rows-content Homepage */

#rows {
  height: 30%;
  font-family: 'Poiret One', cursive;
  /*font-size: 2.3vh;*/
  font-size: 24px;
  color: white;
}
.portfolio {
  height: 100%;
  /*background: red; /* For browsers that do not support gradients
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
  background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
  -webkit-background-size: ;
  background-size: cover;
  background-position: center;
}
/* Hover effects for portfolio block */

.portfolio:hover {
  text-decoration: underline;
}
/* Portfolio Overlay Block */

#portfolio-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Tools Block */

.tools {
  background-color: green;
  height: 100%;
}
/* Hover effects for tools block */

.tools:hover {
  text-decoration: underline;
}
/* Tools Overlay */

#tools-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* About Me Block */

.about {
  background-color: lightblue;
  height: 100%;
}
/* Hover effects for tools block */

.about:hover {
  text-decoration: underline;
}
/* About Me Overlay */

#about-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Contact Me Block */

.contact {
  background-color: darkorange;
  height: 100%;
}
/* Hover effects for tools block */

.contact:hover {
  text-decoration: underline;
}
#contact-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
.row .text-center {
  padding: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container wrapper">
  <div class="row header">
    <div class="col-sm-12 headFont jumboHero text-center">Monsieur Bigglesworth</div>
  </div>

  <div class="row" id="rows">
    <a href="#" id="rowLink">
      <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
        <div id="portfolio-overlay" class="title">Portfolio</div>
      </div>
    </a>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
      <div id="tools-overlay" class="title">Tools</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
      <div id="about-overlay" class="title">About</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
      <div id="contact-overlay" class="title">Contact</div>
    </div>
  </div>
</div>

Answer №2

Include the following code snippet in your CSS file:

.center-text {
  margin-right: 0;
  margin-left: 0;
}

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

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

htmlcss

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

What's the best way to determine the horizontal scroll amount of a div using jQuery?

I'm facing an issue with a large div element that has specific configurations: <div class="divImagem" style="position:relative; width: 1424px; height: 790px; overflow:hidden;"> Due to its size, this div is causing a horizontal scroll bar to ap ...

jquerycsshtmlscroll

Is there a way for me to extract the content from a table within an HTML document?

My goal is to extract data from , specifically focusing on the placement and points earned by a specific player. Upon inspecting the HTML code of the website, I located the details related to the player "Nickmercs" as follows: HTML Text The rank was displ ...

pythonhtmlweb-scraping

Creating a custom HTML5 pattern for formatting Pakistani phone numbers

For my HTML5 pattern for Pakistan Phone Number Format, I have the following criteria: 03xx-xxxxxxx My current regex code is as follows: /03[0-9]{2}-[0-9]{7}/ Now, I want to ensure that the next 7 digits after the hyphen meet the following conditions: ...

javascriptregexhtml

Guide on coding in Node.js to showcase an image on a web browser

Is there a way to set a local image file as the background for my browser page? I am experiencing an issue where the image does not display when I run my app index.js file through the node.js terminal and visit localhost:3000, even though it works fine whe ...

htmlnode.js

Adapting software for use with Panasonic Viera

We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

javascripthtmltelevision

Display SVG at full size without any distortion

How can I make the SVG image 100% by 100% without scaling? I want the image to be centered on the page both horizontally and vertically. The challenge is that I also want to display the areas outside of the SVG artboard, so using CSS to center it won&apos ...

javascriptjqueryhtmlcsssvg

Offspring component fails to reverse the skew as intended

Is it possible to skew a navigation bar without affecting the text inside it? I tried skewing the main div of the navigation bar and using a negative skew value on the text, but it didn't work as expected. How can I achieve this effect successfully? ...

htmlcss

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Hello, I am working on creating a customized dropdown list similar to the one shown in the image. https://i.sstatic.net/saeCd.png My goal is to have a select list with options that display both an image and the country name. However, my current code is n ...

phphtmlcss

What is the trick to shortening paragraphs with dots...?

There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...

htmlcssangularjs

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

javascriptjquerycssajaxvalidation

Effortless design using Flex Box

Creating a consistent HTML structure for my website using bootstrap 4 is my goal. The key elements include: sidebar, h1, and content. The challenge lies in organizing them effectively based on the screen size: For mobile view, they should be arranged in ...

csslayoutflexboxbootstrap-4

What is the best way to make an exit pop up disappear when clicking on any area?

I'm new to programming in JavaScript and jQuery and I wanted to implement an exit pop-up feature. While I came across a helpful tutorial online, I encountered an issue where users could only exit by clicking on the "X" button. I want them to be able t ...

javascriptjqueryhtmlpopupexit

authentication routing procedure

My web portal for event bookings initially allows users to choose tickets without logging in. However, when it comes time to make a payment, the user must sign in. I have set up a redirect to the sign-in page and then back to the main page of the portal wh ...

htmlexpress

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

I recently started learning JavaScript and wanted to update the content of a paragraph when a button is clicked. However, I encountered an issue where this functionality doesn't seem to work. <body> <p id="paragraph">Change Text on cl ...

javascripthtml

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

phphtmlarraysemail

Guide on submitting a pre-filled form with data pulled from an array of objects using vue

My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user. This data is stored in an array of objects, where each object represents a dog's information. I ...

javascripthtmlcssvue.jsvuejs2