What is the best way to customize the bootstrap container to align on the right side

Looking to create a border-bottom that extends beyond the container width on the right side? I have two columns using col-md-6. The right column contains an article with a one px border-bottom. I want this border to reach all the way to the viewport edge on the right. Take a look at the image below:

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

You'll notice in the image that the vertical line ends where the container does. This is where the content stops and text wraps onto a new line. However, I want the border to extend past that point and reach the viewport edge.

Just so you know, I'm using Bootstrap grid for this design!

Check out my code progress here: http://codepen.io/anon/pen/gaewLB

htmlcss

Answer №1

Boundaries cannot exceed the confines of their respective element.

However, an alternative approach is to utilize a pseudo-element; like this:

.page header,
.page article {
  padding: 60px 30px;
  /*border-bottom: 1px solid #c2c2c2; */
  position: relative; /* positioning context */
}
body {
  overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
  content: '';
  position: absolute;
  top:100%;
  left: 0;
  height: 1px;
  background: #c2c2c2;
  width: 100vw; /* or some other large px/em value */
}

Check out the Codepen Demo here!

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

Problems Arising with Bootstrap Media Queries on Smaller Tablets in Landscape View

I am currently using Bootstrap's standard media queries for my project and they are working perfectly, except for small tablets in landscape mode. I have included an image to demonstrate this issue. The problem seems to arise from the custom CSS that ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

I am eager to incorporate my own unique 'add to cart' button

Currently, I'm utilizing the Motta theme for my WooCommerce store. However, I find the add to cart button to be too large for my liking. I am hoping to simplify it to resemble a plus button. Any assistance in achieving this would be greatly appreciate ...

csswordpressbuttonwoocommercecart

Make the Bootstrap Inline Form Fill the Entire Width of the Column

Just starting out with Bootstrap v4 and experimenting with it. I have a question regarding how to make an inline form expand to the full width available inside the column. Here is the code snippet: <div class="container"> <div class="row"& ...

htmlcssbootstrap-4bootstrap-grid

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

javascripthtmlcssonhoverjsblocks

utilizing two input elements within a single form each serving a unique purpose

Hello everyone, I'm seeking assistance on how to code a form with two input element tags, each having different functions. Alas, the solutions provided in this source are not working for me. Here is the troublesome source PHP CODE: <?php $ser ...

html

Tips for aligning an image vertically

I'm struggling to vertically align an image within a div, no matter what I try it just won't cooperate. The goal is to center it within a material design lite cell. Take a look at my code: CodePen HTML: <div class="mdl-grid"> <div ...

htmlcssmaterial-design-lite

Divergent find function behavior in jQuery when applied to div or tbody

I've encountered an issue while using the jQuery find selector by Id with a div and tbody. Let me simplify my problem for better understanding. HTML <div id='iamdiv'>HELLO</div> <table> <tbody id='iamtbody' ...

javascriptjqueryhtmlcssselector

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

htmlcsspopup

Troubleshooting: Images not appearing on HTML pages

I've recently started learning HTML and can't figure out why my code isn't working. I am trying to add an image but it only appears as a blue box with a question mark in it. Here is my code: <head> <title>Welcome</title> ...

htmlimage

On mobile devices, the Bootstrap navbar ensures that items are always centered for

I have a custom-built navbar using bootstrap. On large screens, everything looks as desired with the user dropdown and currency on the right end of the navbar, and the logo on the left. Large However, when viewing on small screens, the hamburger menu appe ...

htmlnavbarbootstrap-5

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this probl ...

htmlcss

How can I connect an HTML page to an MS-Access database?

Hello everyone, I am looking to connect an HTML page to an Access database. If anyone has the HTML code for searching that database, I would greatly appreciate it. Thank you! I am using Access 2010. ...

htmldatabasems-access

Issue with PHPExcel during report generation

Seeking assistance for resolving an issue where an error occurs in my saved Excel file when some fields in the form are left empty and I attempt to submit (send to Excel). The error only appears when certain inputs are empty, but there is no issue if all ...

phphtmlmysqlphpexcel

JS changes the ID in HTML

I have a code snippet that displays "hello world" where each word has its own unique style applied using CSS. I am trying to implement a functionality where clicking on either "hello" or "world" will swap their respective styles. However, my current imple ...

javascripthtmlcss

Guide on transitioning from a WebGL renderer to a canvas renderer in three.js

My goal is to display a scene using either a WebGL renderer or a canvas renderer in three.js (version 69). This is the code I am using: <!DOCTYPE html> <html> <head> <script src="./libs/three.js"></script> <scri ...

javascripthtmlthree.js

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

jquerycsstag-it

Continuous background image motion descending from the top

Can anyone help me modify this JavaScript code so that the background image moves from top to bottom instead of left to right? <script> $(function(){ var y = 0; setInterval(function(){ y+=1; $('body&a ...

javascripthtmlcssbackground

Issue with Date Formatting in Timeago Jquery Plugin

Let's dive in: I'm currently working on integrating the timeago jQuery plugin (http://timeago.yarp.com/) into my project to display relative time (e.g. "2mins ago" instead of "1.10pm"). In my MySQL database, there is a field that stores the curre ...

phpjquerymysqlhtmltimeago

What prompted Laravel to encase my sidebar within an <em> element?

**Utilizing Laravel 5.8.31 & Bootstrap 4. Browsers: Chrome v. 76.0.3 and Opera 62.0.33 ** During my CRUD function testing, I encountered an issue after deleting a post. Following the deletion, the controller redirected back to the post index page. How ...

phphtmllaravel-5bootstrap-4

Retrieving and displaying all anchor tags within a designated div element

So I'm facing a small issue with my portfolio website (you can check it out at this link) The problem arises when clicking on a portfolio piece, as the top section should open up to display details such as title, year, role, and description along wit ...

jqueryhtmlimageattr