How come the Bootstrap 4 row doesn't stretch to the entire available width?

It seems that flexbox should fill all available space in width, but for some reason, the row I inspected is not doing so. Even though it's set to display flex and there doesn't seem to be anything unusual about it, Chrome indicates that there is plenty of space to be filled.

Prior to this problematic row, I created another div with just d-flex and a red background, which worked perfectly by filling all available width space. So why is this particular row failing to do the same? That remains the question.

Despite searching the internet high and low for an answer, none could be found.

<div class="container">
<div class="row justify-content-md-center">
        <div class="col-10 pb-2 text-justify news_content">
        test
        </div>
</div>
</div>

https://jsfiddle.net/g1xLhz6r/

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

Answer №1

By changing the Bootstrap class from .container to .container-fluid and updating the class from .col-10 to .col, you can achieve the desired outcome. It's important to note that using .col-10 allocates 10 out of the 12 available columns, leaving a one-column space on each side of the div.

.news_content {
  background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid"><!-- Update to container-fluid -->
  <div class="row justify-content-md-center">
    <div class="col pb-2 text-justify news_content">
      test
    </div>
  </div>
</div>

If you prefer, you can remove the .container or .container-fluid class from the outer div and instead add the Bootstrap class no-gutters to the row div, as demonstrated below (remember to switch to using .col in place of .col-10):

.news_content {
  background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div><!-- removed class = container -->
  <div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
    <div class="col pb-2 text-justify news_content">
      test
    </div>
  </div>
</div>

Learn more about no-gutters 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

Unusual problem arises with image hover on Chrome browser

I'm currently working on an HTML/CSS website that incorporates an image magnification effect when hovering over images. Everything seems to be functioning correctly, except for one minor issue in Chrome. Upon page load, the images seem to jitter and r ...

Adjust the placement of the logo and burger menu on the collapsed navbar using react-bootstrap

I have a setup using react-bootstrap where the logo is on the left and the menu items are on the right. When collapsing, the burger menu appears on the right side as expected. Now, I am attempting to reposition the items on collapse so that the burger men ...

To center a div vertically within a Bootstrap 4.1 container-fluid > row > col, you can use the following method

I'm currently working on incorporating Bootstrap 4.1's align-middle into a col nested within a row. Despite my efforts, the content within is not aligning to the middle as expected. Take a look at my code below: <body class="d-flex"> < ...

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

Adjust grid width dynamically according to the container

I am working with a grid made up of 32x32 slots. Link to Grid Image How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile? Below is the code snippet: <style> .drag-item { pos ...

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

To enhance readability, the intricate code has been abstracted. Within our Angular 2 project, we are working with a component called <top-component> (LEVEL 1): <top-component> </top-component> This component includes a template known a ...

Utilizing the calc() function to determine height dimensions

I created a very simple layout with 5 divs, which can be viewed here: http://jsfiddle.net/8tSk6/. In this layout, I want the div with the ID "kubka" to have a height of 100% - 100px (height: calc(100% - 100px);). However, I am running into issues as it i ...

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

When working with the Slide Toggle in Material Design, I noticed that it does not have a stopPropagation event. This is because the "MdSlideToggle.prototype._onChangeEvent" already includes a call to stopPropagation. So, what should be used instead? <m ...

The column in the row class experiences overlap when reaching a certain width

In the coding below, I have included a column for images and form elements within a row class. However, there seems to be an issue with overlapping at certain widths. <div id="contactme" class="container-fluid"> <h3 style="padding-left:30 ...

make the text in em font size larger

Incorporating HTML dynamically into a page using JavaScript is shown in the example below. _strInnerHtml += "<em>" + value.cate_name + " | " + value.city_name + "</em>"; _strInnerHtml += "<a href='#' class='activi ...

I'm struggling to get the Bootstrap collapse navbar-collapse feature to work in my Angular

My attempt at implementing the bootstrap collapse navbar-collapse feature in my Angular 8 project seems to be not working correctly after compilation. I have already installed: bootstrap - 4.3.1 and made changes to the angular.json file. I also have jquery ...

Use Vue.js to shorten the number of decimal places and include commas in numerical values

How can I best parse a long number retrieved from a JSON using VueJS within a for loop? The JSON data is used in a v-for prop to create Li elements for a side navigation. I attempted to use vue-numeric without success since the project does not utilize ECM ...

What are the recommended steps for successfully integrating a Bootstrap 4 Split Navigation?

Wanting to improve the coding for a BS-4 split navigation. Ideally, looking to have only one instance of each link but struggling to figure out how to achieve it. Check out the code here <nav class="navbar navbar-expand-md navbar-light" style="backgro ...

Arranging rows of a specific height within a table at any location

I need to create a virtual table to browse through a very large dataset. Is there a way to position the rows (with fixed height) anywhere within the table? The issue I am facing is that the table properties automatically adjust the row height, disregarding ...

Transitioning the gradient on hover using CSS

I have looked through many other questions here, but I can't seem to find an answer to my issue. I have a div block with a :after CSS selector where I apply a gradient overlay on an image. When someone hovers over the div, I want a slightly different ...

Creating iPhone style form elements using HTML

Thinking of replicating the form elements from iPhone using HTML/CSS but wondering if it already exists out there. I searched online but couldn't find anything. Has anyone come across something similar before? ...

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

Validating fields using JavaScript and HTML

I'm having an issue with the code below because it only allows me to log in with the user and password from the last position of the arrays. I want it to let me login with each user and their corresponding password, for example, user at position 1 wit ...

Tips for populating text box values using AngularJSWould you like to learn how

I have a UI table in HTML where I display records fetched from the database using AngularJS. Scenario: There is a text box where I can select an ID and the related fields are displayed in the table mapped for that particular ID. <td>Name</td> ...