When Bootstrap 4 columns are hidden in small view, they create a noticeable blank space

This is my first time using Bootstrap 4 and I am trying to create a website with blank columns on the left and right in large view, but I want them to disappear in small view.

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

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

I have structured my HTML like this to create the three columns: two blank ones and the gray one in the middle:

<div class="container-fluid">
    <div class="row">
        <div class="col"></div>
        <div class="col-sm-12 col-md-8"></div>
        <div class="col"></div>
    </div>
</div>

However, due to the min-height: 1px; property applied to all .col-* classes by Bootstrap, the blank columns still create space even when they should be hidden, disrupting my layout.

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

Is there a way to achieve what I want? Am I using Bootstrap 4 correctly for this purpose?

htmlcsstwitter-bootstraptwitter-bootstrap-4

Answer №1

To horizontally align a column (.col) within a row (.row), you can simply apply the class justify-content-center (refer to flex utilities) to the row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col col-sm-12 col-md-8">Hello World</div>
    </div>
</div>

This approach eliminates the need for empty columns just for alignment purposes.

Alternatively, you could utilize the d-* classes (check out utilities) to hide specific columns:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col d-none d-md-block">1</div>
        <div class="col-sm-12 col-md-8">2</div>
        <div class="col d-none d-md-block">3</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

Is there a way to center text of varying lengths vertically and allow it to wrap around a floating image?

Looking to create a div with an image floated to the top left and text of varying lengths. The aim is to have the text centered in the middle if it's shorter than the image or wrap around it if there's enough content. The basic layout is: <d ...

htmlcssvertical-alignment

"Revamping CSS Slideshows with Custom Backgrounds

For my page layout design, I referenced the following examples: http://jsfiddle.net/nimbu/KEqSF/?utm_source=website&utm_medium=embed&utm_campaign=KEqSF I am trying to create different backgrounds for each slide in order to have a unique backgroun ...

htmlcssbackgroundslideshow

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

Personalize the "exploring" data table with Jquery

I am looking to customize the search functionality of DataTables using jQuery: In the following example: https://datatables.net/examples/api/multi_filter.html There are input text fields at the bottom of the DataTable that serve as filters for each column ...

javascriptjqueryhtmldatatables

Update a mySQL table using dynamic input from a table

I'm facing challenges updating a mysql database with a dynamic table that allows me to add or remove rows before submitting the form. While I can make it work with hardcoded values, I struggle when trying to update with a while loop. It just doesn&ap ...

phpmysqlhtml

Inquiries regarding CSS consolidation in the latest version of Rails, Rails 7

Starting a new Rails 7 application with Bootstrap CSS and JS bundling, along with CSS bundling, has resulted in the following structure: app/assets/builds, app/images/foo.jpg, app/assets/stylesheets/application.bootstrap.scss I have utilized Yarn to add B ...

cssruby-on-railssass

Time stamp in a *.mov/*.avi file

I am encountering issues with playing .mov/.avi files. Currently, I have a script that embeds the movie and provides JavaScript shortcuts to control its playback. Now, I would like to allow my members to add annotations to specific parts of the film, sim ...

javascripthtmlvideohtml5-videovideo-player

Is it possible to convert mirrored gradients into CSS code?

Is it possible to transform this "reflected" gradient image into CSS code? And if so, how would I go about doing that? ...

css

Retrieve data from HTML in order to apply styling to an element

I am attempting to set the width of my .bar-1 outer span element based on the value of my inner span element. <span class="bar bar-1"> <span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabinde ...

htmlcss

Issue with Onclick event redirection not functioning properly

This is my first experience creating a webservice, and I'm encountering some issues with the current functionality. My Visual Studio button only accepts OnClientClick without any errors. Here's how my button is defined in the .aspx file: <asp ...

c#htmlasp.net

Implementing crossfilter in Highcharts necessitates altering the title of the x-axis from 'categories'

My current goal is to incorporate crossfilter functionality into my highcharts project. Within the dataset, there exists a key labeled 'date'. The values within the date key are structured as 'yyyy-mm' (e.g., 2018-04). During implement ...

javascripthtmlcsshighchartscrossfilter

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

cssreactjsdraftjs

A single feature designed to handle various elements

I currently have this HTML code repeated multiple times on my webpage: <form class="new_comment"> <input accept="image/png,image/gif,image/jpeg" id="file" class="file_comment" key=comment_id type="file" name="comment[media]"> <spa ...

javascriptjqueryhtml

Retrieving inline CSS value using jQuery

How do I retrieve the inline-css value of the second child within div #one using jQuery. <li id="one"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, velit!</h2> <div style="width: 1425px; height: 1080px ...

jqueryhtmlcss

Strategies for transferring data from JavaScript to Express for seamless integration as a default value

I am currently utilizing express, MongoDB for the database, and EJS. I am in the process of developing a form that allows users to submit a new article for a blog. The goal is for the website to redirect back to the page with the form fields populated if a ...

javascripthtmlexpressejsdata-transfer

set up a controller on the ng-view page

I needed to customize the controller for a specific ng-view page, so I placed the controller in the ng-view page itself and used it exclusively for that page. However, the code is not displaying the expected output from that controller. Here's what h ...

javascriptphpjqueryhtmlangularjs

confirm chosen option html php

Is there a way to validate the select tag so that an alert appears when the user tries to submit without selecting a session? Below is the HTML and PHP code I have been using, any help would be appreciated. <select name="ses"> <o ...

phphtml

Is there a way to prevent a Bootstrap alert from disappearing on its own?

I'm having trouble with my button's alert feature. When clicked, the alert should display and stay visible until it's closed. However, on my website, the alert quickly flashes on the screen every time the button is pressed. On my jsfiddle ...

jqueryhtmlcsstwitter-bootstrapbutton

How to incorporate the onkeyup event within the append function for input elements in JavaScript

var tvalue = []; function add_purchase(value){ if (value in tvalue) { return 0; }else{ tvalue.push(value); } var obj = document.getElementById('item'); var item = obj.options[obj.selectedIndex].text; ...

javascriptjqueryhtmllaravel

Switching the data-bind with jQuery on a click event: A step-by-step guide

I am working on a form that contains multiple fields. Here is an example: <input id="txtContactFirstName" name="txtContactFirstName" maxlength="20" class="k-textbox standardInput" required="required" data-bind="value: appointmentDetails.ContactFirstNam ...

javascriptjqueryhtmlkendo-ui