Ensure that the child elements of a div item with the "container" class in Bootstrap 4 are given a width of 100%

For the parent div, I utilized the container class here:

<div class="container">
        <main role="main" class="pb-3">
              <div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text- 
                 center">
               <div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: 
                  translate(-50%, 
                 -50%);transform: translate(-50%, -50%);">
                 <img class="rounded-circle border border-info p-1" style="width:150px;height:150px;" 
                 src="~/ProfileImages/@currentuser.ImageProfile">
                <h4 class="text-center font-weight-bold text-info">@Model.ApplicationUser.ArName</h4>
               </div>
              </div>
         </main>
</div>

Now, I am trying to adjust the width of the child div inside the parent to 100%, but I am facing difficulties with this code:

 <div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text-center">
        <div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, 
        -50%);transform: translate(-50%, -50%);">
            <img class="rounded-circle border border-info p-1" style="width:150px;height:150px;" 
            src="~/ProfileImages/@currentuser.ImageProfile">
            <h4 class="text-center font-weight-bold text-info">@Model.ApplicationUser.ArName</h4>
        </div>
</div>

Is there a way to remove the effects of the bootstrap "container" class on the child element?

csstwitter-bootstrapbootstrap-4

Answer №1

//Check out this responsive HTML template that requires minimal CSS for all screen widths

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Necessary meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body style="width: auto; height: auto;">

    <div class="container mt-2">
        <div class="card bg-white text-center" style="width: 20rem">
            <img class="img-fluid card-img-top"
                src="https://cnet2.cbsistatic.com/img/-e95qclc6pwSnGE2YccC2oLDW_8=/1200x675/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg">
            <div class="card-body">
                <h4 class="text-center font-weight-bold text-info">@Model.ApplicationUser.ArName</h4>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS in sequence -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

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

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

csshtmlimagereactjsposition

Experiencing a lack of desired outcome in Outlook when using simple HTML with table elements

When creating a template for Outlook, I encountered an issue where the logo appeared on the right and the link text was on the left, which is the opposite of what I wanted. How can this be resolved? <center> <table width="600px;" style="margin:au ...

htmlcssoutlookhtml-table

What is the best way to position a single element in React using the Grid Component without causing any overlap?

I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...

javascriptcssreactjsgridfrontend

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

javascriptcss

The Boostrap card-deck appears to be see-through and malfunctioning

This problem has been puzzling me for quite some time now, and I just can't seem to find the solution! Kindly disregard the other language and code - the card is located under the jumbotron. (To access the link, remove spaces: https://code pen.io/ano ...

htmlcssbootstrap-4

scribbling at the heart of the page

I have been struggling to get this text centered using the following code: echo "<div class='pagination' align ='center'>"; Unfortunately, the text still appears on the left side. How can I properly center it? Additionally, I h ...

phpcss

Trigger a random tune when hovering the mouse

I need help figuring out how to make a fixed image on my page trigger a random sound track when hovered over. The sound could be one of five different tracks. Here is the HTML for my image: <img src="images/Airplane.png" class="Airplane-photo"> Bel ...

javascriptjqueryhtmlcss

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

javascripthtmlcssangularjsng-style

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

javascriptjquerycsstwitter-bootstrapjquery-ui

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

htmlcsshyperlinkfocustabindex

With Vue's new implementation of adding data attributes to the "*" selector, how can I adapt to this change?

Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS: *, body { margin: 0; padding: 0; } This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data att ...

cssvue.jsbuild

The select element is displaying with a different width compared to its sibling, causing the Bootstrap spacing to over

Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller. When I assign the class "col-6" to both fields, t ...

htmlcsstwitter-bootstrapbootstrap-4

Leverage scope variables and dynamic CSS properties when using ngClass

Is there a way to manipulate the CSS dynamically in HTML using a scope variable? <div ng-class="myClassScope, { 'dynamic-class': !ifIsNot }"> ...

cssangularjsangularjs-scopeng-class

Switching from vertical pills to horizontal tabs for smaller screens

I have a vertical pills menu that looks great on large screens, but takes up too much space on small screens. Is there a way to switch it to a horizontal tab layout for smaller screens? I tried searching online for examples but couldn't find any. < ...

csstwitter-bootstrapbootstrap-4

Is there a dynamic element that cannot be accessed in the rest of the DOM?

Currently, I am facing an issue with a dynamically generated button using jQuery. This button is present on every row of my table, and I am looking to implement some functionality to it. However, my biggest challenge is selecting the parent elements of thi ...

jquerydynamicbootstrap-4

Content for Bootstrap carousel items can be divided into two separate divs arranged horizontally

I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below. Here is the curre ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

jqueryhtmlcss

Revamp your Redux Form with a fresh new 'Field' label style

Is there a way to style the label of a Redux Form field? The Redux Form API does not provide information on how to apply styles to the label. Despite applying the classes.formField class, the label itself remains unstyled. Could this be an issue with inhe ...

cssreactjsmaterial-uiredux-form

Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well. I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue: When I input a long passag ...

htmlcssreactjsreact-nativenext.js

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf