"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

My goal is to create two divs that each take up 6 columns with a space of 1px between them.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6  bg-danger text-light text-center"> Hello </div>
</div>
</div>

However, when I try to achieve this layout, one item wraps underneath instead of remaining side by side. Do you have any suggestions on how to make both items occupy 6 columns with spacing in between while staying next to each other?

htmlcssbootstrap-4css-grid

Answer №1

Instead of using margins, the gutter (spacing between columns) is created with padding. When you adjust the margins, it disrupts the grid layout. You can achieve this by using inner DIV's...

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-6 text-light text-center">
            <div class="bg-dark mr-1">Hello</div>
        </div>
        <div class="col-6 text-light text-center">
            <div class="bg-danger">Hello</div>
        </div>
    </div>
</div>

Alternatively, prevent the row from wrapping with flex-nowrap...

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
        <div class="col-6 bg-danger text-light text-center"> Hello </div>
    </div>
</div>

Or simply utilize the padding utilities to adjust the column spacing.

Answer №2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
<!-- Set the column width and appearance on different devices -->
<div class="row">
  <div class="col-sm-6" style="background-color:yellow;">50%</div>
  <div class="col-sm-6" style="background-color:orange;">50%</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

Managing state changes with a slider in ReactJS

I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...

javascripthtmlreactjs

Switch from Index.html to Index.html#section1

Currently, I am working on a website and sending someone a draft for review. However, the Home screen is designed as a 'a href' link with "#home". The issue arises when the website opens from my computer; it goes to ...../Index.html instead of .. ...

javascriptjqueryhtmlcss

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

Is there a way to adjust the theme color in _variables.scss by recompiling Bootstrap while working with Angular and CSS?

I've been trying to update the primary color in my Angular project by editing the SCSS file node_modules/bootstrap/scss/_variables.scss. However, after stopping npm and running the front-end again, I noticed that the changes I made are not reflected i ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

javascriptjquerycss

Is there a way to insert a clickable hyperlink in the text of a MessageDialog?

I am currently working on MessageDialog code that looks like this: MessageDialog dlg = new MessageDialog("None of the images you selected contain location information. You can add your own after downloading http://exifpilot.com/"); await dlg.ShowAsync(); ...

c#htmlhyperlinkwindows-store-appsmessagedialog

Is there a way to implement fixed scrolling on a website?

I'm interested in implementing fixed scrolling on a webpage similar to the effect used here: . When you scroll on that website, it smoothly transitions to the next div. I believe there is some JavaScript involved, but I am not sure how to achieve thi ...

javascriptjqueryhtmlcssscroll

Steps for dynamically loading the content of a Bootstrap 4 Modal

I am currently in the process of developing a website that will showcase a wide range of images. The design is set up as a landing page with all content contained within the main HTML page - there is only an index.html file for now. This website will serv ...

javascriptphpjqueryhtmlbootstrap-4

Ways to enlarge an image while hovering the mouse over it without disrupting the positions of other images (JQuery)

Is there a way to achieve a similar effect to Google Images, where the image pops and comes in front when we mouse over it without affecting the positions of other images? This should only happen when the cursor is still and not moving around randomly. I ...

jqueryhtmlcss

Tips on aligning vertically centered left and right floating objects without having to use the line height property

          Here is the issue I am facing http://jsfiddle.net/vT4YT/ <table><tr><td><div></div><div></div></td></tr></table> You can see that the options and row text are not vertic ...

htmlcsscss-floatvertical-alignment

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

"Tips for stopping users from using Ctrl+U to view page source in

Is there a way to prevent users from viewing the source code (HTML + JavaScript) of a page by disabling Ctrl+U in the browser? ...

javascriptphpjqueryhtml

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

htmlcsscss-animations

Arrange images with haphazard placement

Can someone guide me on creating a block of images when working with an array of random items? https://i.sstatic.net/qEcQy.png ...

javascripthtmlcssreactjsimage

Looking to authenticate a CSS span class within an XML document using Oxygen Program?

This is in connection with my initial query. The XML does not recognize the CSS span class. <l rend="indent"> <span class="face_dropcap_ ">C</span><hi rend="initial_roman">E</hi>stoit alors que le prefent des <span class= ...

cssxmloxygenxml

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

One issue I am currently facing is the inability to intercept a 401 status and redirect to the login page, which is a common practice in most applications. My interceptor code seems pretty standard: intercept(request: HttpRequest<any&g ...

htmlcssangularhttp

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

Tips for capturing audio on a smartphone browser?

Looking to capture audio in the browser on both iOS and Android devices. What solutions are currently available (as of October 2013)? What is the rate of acceptance of WebRTC by various browser developers? ...

ioshtmlmobileaudiowebrtc