Exploring ways to increase the width of rows in Bootstrap 4

Is there a way to make a row expand to 100% of its containing div in Bootstrap 4? I've tried using w-100 and d-inline-block but neither seems to work. Any help would be appreciated.

CODEPEN

.container {
  width: 90%;
  border: 1px solid black;
  height: 200px;
}

.row {
  width: 100%;
  background-color: lightblue;
}

.col-12 {
  width: 100%;
  background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">CONTAINER
  <div class="row w-100">ROW
    <div class="col-12">COL-12</div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Avoid specifying the width in the CSS classes.

.container {
  border: 1px solid black;
  height: 200px;
  width: 90%; /* you can omit this */

}

.row {
  background-color: lightblue;
}

.col-12 {
  background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">CONTAINER
  <div class="row">ROW
    <div class="col-12">COL-12</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

Support for Arabic in database, PHP, and JavaScript

After inputting an Arabic comment into a textarea on the site, it displays correctly as "عربي" and is successfully sent to the database. However, upon refreshing the page, the text appears garbled: "عربÙ�". I attempted to directly enter s ...

phpjavascripthtmlajaxmysqli

Utilizing the power of JQuery's each() function alongside UI.sortable() for enhanced

Need help with updating data-priority attribute after sorting an unordered list using jQuery ui. Currently, the attribute is only set on load and not updated after each sort. I have created a fiddle to demonstrate the issue. It seems like a simple fix but ...

javascriptjqueryhtml

Implement pop-up functionality on additional buttons. Modify existing code to accommodate multiple buttons

I have a feature that allows me to click on a button and trigger a pop-up window with the desired content. The issue I am facing is how to duplicate this functionality for multiple buttons, each triggering a different pop-up content. I attempted to duplic ...

javascripthtml

Creating a clickable image in the header of an R Shiny app

I've been attempting to create a hyperlink from the image output, but I'm encountering difficulties despite reviewing similar questions on Stack Overflow. svg with clickable links in shiny - not clickable The tags are not working. server.r li ...

htmlrhyperlinkshiny

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

I am struggling to achieve a two-column layout with nested columns inside each one. The code I used looks great on Chrome and Safari, but on Firefox and IE, it only displays in a single column: What mistake am I making here? .two-columns { column-cou ...

cssflexboxcss-multicolumn-layoutcolumn-count

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...

csssvg

browsing through elements in express-handlebars

this is the data structure I pass to my handlebars template module.exports = function(showHeader, userId){ // defining the model return { userId: userId, seminars: userSeminars; }; }; var userSeminars = [{ // sample data seminarId: 1, ...

htmlnode.jsexpresshandlebars.js

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

function adjustHeight(){ var headerHeight=$(element).find('.header').outerHeight(); console.log(headerHeight); var temp=$(window).height()-headerHeight; console.log(temp); $('.users ...

javascriptjqueryhtmlcss

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

cssbuttoncarouselbootstrap-5border-radius

Navigating in a Curved Path using Webkit Transition

Currently, I am working on a simple project to learn and then incorporate it into a larger project. I have a basic box that I want to move from one position to another using CSS webkit animations and the translate function for iOS hardware acceleration. I ...

javascriptanimationwebkitcssmotion

The many potentials of looping through Sass maps

My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...

cssloopsdictionarysass

Tips on positioning the down arrow of an accordion-button to the left

I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

htmlcssbootstrap-5

Increasing height for individual Bootstrap cards, without affecting all cards within the same row

I've encountered an issue where I need to increase the height of a single bootstrap card in a tile-module layout without affecting the height of any other cards in the same row. The code snippet below shows the HTML structure I currently have: <div ...

cssbootstrap-4

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to trigger a function with ng-click in my AngularJS directive?

I am struggling to understand how to invoke a function from my directive using ng-click. Here is an example of my HTML: <div> <directive-name data="example"> <button class=btn btn-primary type="submit" ng-click="search()"> ...

javascripthtmlangularjs

Is there a way to extract a list of words from a designated element using selenium?

I have been trying to scrape the content of this webpage 10 Fast Fingers in order to extract the words that need to be typed into a list. My intention is to then input these words into a text box for typing practice. The code seems to be running fine, but ...

pythonhtmlcssselenium-webdriverweb

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

csssvg

Commence the 10-second Redirect Timer

I implemented a page that automatically redirects the user after 10 seconds using the following code snippet. <META HTTP-EQUIV="refresh" CONTENT="10;URL=login.php"> Now, I have this PHP code that I want to display dynamically counting down from 10 ...

phphtmlhttp-redirect

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...

htmlresponsive-designbootstrap-4

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

htmlangulartypescript