creating a wide div using bootstrap 4

Why is the bottom border not extending the full width within the inner div?

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-2 bg-light mh-100">
                <div class="d-flex justify-content-center border-bottom w-100">
                    <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
                </div>
            </div>
            <div class="col-12 col-md-10 bg-dark mh-100">
                <p>sfsdfsdfsd</p>
            </div>
        </div>
    </div>
htmlcssbootstrap-4

Answer №1

"How come the border bottom inside my div isn't stretching to full width?"

The reason is that Bootstrap columns have padding by default. To fix this, you can use p-0 (padding:0) to remove the padding.

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-2 bg-light mh-100 p-0">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/avayadak.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>
</div>

Visit this link for more information!

Create a Full Width Layout in Bootstrap 4

You can achieve a edge-to-edge layout in Bootstrap 4 by following the guidelines explained here. Zero out container-fluid padding with px-0 and add no-gutters to the row.

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-12">
            (edge-to-edge content)
        </div>
    </div>
</div>

If using .row.no-gutters, you can simply remove the container-fluid as well.

Explore more about Full Width in Bootstrap 4 here.

Answer №2

As per the bootstrap 4 documentation:

If you need a design that spans edge-to-edge, simply remove the parent .container or .container-fluid.

Check out Bootstrap 4 No Gutters documentation here

So, to implement this:

    <div class="row no-gutters">
        <div class="col-12 col-md-2 bg-light mh-100">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>

Answer №3

Here is the solution I came up with:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
<div class="container">
  <div class="full-width">
  </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

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

BeautifulSoup is throwing an AttributeError because it cannot find the attribute 'h3' in the list object

I am a newcomer to the world of Web-scraping and I am currently working my way through this tutorial ( ) in order to collect movie data. However, I believe I have made a mistake in defining the variable "first_movie". This is the code I have: from reque ...

pythonhtmlweb-scrapingbeautifulsoup

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

cssangularjsangular-material

Width of flex container overflowing from relative position is at its full capacity

I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely po ...

htmlcssflexboxoverflow

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

phphtmlformsmysqliecho

How can I pass an Objective-C object to JavaScript?

Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...

javascripthtmlobjective-cioswebkit

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...

javascriptjqueryangularjshtmlionic-framework

Angular 7 template not functioning properly with Bootstrap tooltip placement and trigger options when applied to fort-awesome icon

In this coding snippet, I have created an HTML template with a form that includes a tooltip and FontAwesome icon. The goal is to position the tooltip on top of the icon and make it appear when I click or hover over the icon. However, the tooltip consistent ...

bootstrap-4tooltipangular7angular-fontawesome

Fuzzy division following a CSS transformation/animation

I have been working on a content slider, using the guidelines from this demonstration However, I have encountered an issue where my content, which consists of a few divs, appears slightly blurry after the CSS transition completes. This problem only seems ...

csscss-transitionscss-transforms

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

javascriptjqueryhtmlcssbutton

Dynamic image uploading with Ajax

One issue I've encountered is with the ajax image upload feature on my form. It uploads the image when triggered by the onChange event for the file input, but then it uploads again when submitting the form. Is there a way to prevent this duplicate upl ...

phpjqueryhtmlajaxupload

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

javascripthtmlreactjsbootstrap-4frontend

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

htmlcssimageflexboxalignment

HTML input form - issue with combining multiple patterns

Below is a section of my HTML code: <input type="text" #version tabindex="1" class="form-control" id="version" name="version" placeholder="" [(ngModel)]="application.version" required minlength="1" pattern="\d{1 ...

htmlvalidationdesign-patterns

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...

jqueryhtml

Parsing HTML in Python 3: A Guide to Extracting Information

Trying to extract text from a webpage using Python 3.3 and then search for specific strings within that text. When a matching string is found, the goal is to store the subsequent text. For instance, taking this page as an example: and I need to preserve ...

pythonhtmlparsing

Populate any void area when <td> is not occupied in <tr>

I have a table with two rows and columns. If one of the columns is empty, it should move up to the upper row. For example: |td1 | td2| |td3 | | |td5 | td6| This is what I want: |td1 | td2| |td3 | td5| |td6 | | Below is the code snippet that ...

htmlcsstwitter-bootstrap

Transfer your documents effortlessly as soon as they are

I am having trouble implementing an automatic file upload feature without the need for a separate upload button. Below is the code I have so far, excluding the irrelevant CSS. //html <!-- some codes here--> <input type="file" id="f ...

javascriptphphtmljqueryajax

Tips for preventing a Bootstrap container from extending underneath the address bar

I am currently experiencing an issue with a bootstrap container displayed in leaflet. When I drag the container around the screen, it sometimes disappears under the address bar if I move it too far up. Once I release the mouse, it becomes stuck there and I ...

bootstrap-4leafletcontainers

Inject additional space into a variable in order to utilize it in HTML coding

Why isn't there any space between the arrows on my page, even though I tried adding &nbsp; within the string? @{ var hero_statement = "We grow companies from code."; var hero_message = "We offer talented teams to deliver results fro ...

c#htmlasp.net-corerazorbootstrap-4