Is it common practice to create a gap between columns by inserting an empty col-md-1 in Bootstrap?

  <div class="row justify-content-center">
    <div class="col-md-4">
        Displaying Column with a width of md-4
    </div>

    <div class="col-md-1 .d-sm-none">
        <!-- Creating a gap between columns -->
    </div>

    <div class="col-md-4">
        Another Column with a width of md-4
    </div>
</div>

Wondering if adding an empty col-md-1 to space out these two Columns is the correct approach? And also, using .d-sm-none to hide it on mobile. Open to suggestions for a better or cleaner method.

htmlcssbootstrap-4spacing

Answer №1

Absolutely you can give this method a shot

<div class="row justify-content-center">
    <div class="col-md-4">
        Column size of md-4
    </div>
    <div class="offset-md-1 col-md-4">
        Column size of md-4
    </div>
</div>

https://jsfiddle.net/lalji1051/hyp84gLu/2/

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

In Bootstrap 4, the vertical group of buttons is aligned to the bottom

I am trying to align a group of buttons at the bottom, centered horizontally and aligned vertically. Currently, this is how it looks: <div class="row"> <div class="col-md-4"> <div class="center-block"> <div cla ...

cssangularbuttonbootstrap-4ng-bootstrap

The importance of having separate CSS styles for various browsers, particularly when dealing with different versions of Internet Explorer like IE6, IE7, IE8, and IE9

I have always been intrigued by the fact that default CSS does not always work across all browsers, often resulting in breaks specifically for IE browsers (6, 7, 8, 9). As a result, we typically find ourselves creating multiple CSS files tailored for dif ...

htmlcss

The webpage is not updating when the src value of the iframe is changed

Utilizing an IFrame on my main page to load various pages has been somewhat problematic. Occasionally, the first 2-3 pages load correctly when I set the source by clicking a link with the following JavaScript: var frame = $('#mainFrame')[0]; fra ...

asp.nethtmliframe

Automate the manipulation of a dynamically-generated table using Selenium and javascript

Is it feasible to use Selenium to select a menu item created primarily with JavaScript? The HTML tags for this table are only visible in the view source. <table id = "table_id"> <tr> <td> <script> *** </script> </ ...

javascripthtmlselenium

Deactivate hand icon while cursor is placed on a hyperlink

Is there a way to remove the hand symbol that appears when hovering over hyperlinks? I only want the regular mouse cursor to show when hovering over links, not the hand symbol. ...

htmlcss

Using the `form` method with `get` works perfectly in Node.js, however, the status remains pending when checking in the developer tools

I am currently developing a website that utilizes forms for user voting. The goal is to submit these votes to a Mongo database using Node.js. However, I have encountered an issue where the code successfully updates the database but causes a stuck pending o ...

htmlnode.jspug

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

What is the best option: using a Javascript template or exploring another

Just starting out in web development. I want to include the same menu on every page of my new website, but I don't want to manually update it in each file whenever there's a change. Is there an easy template engine for JavaScript or another sol ...

javascripthtmltemplates

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

javascripthtmlcss

Navigate to the following section by scrolling down, and return to the previous section by scrolling up

Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous secti ...

javascriptjqueryhtmlcssweb

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

What steps can I take to correct this CSS code? I am looking to update the content using CSS

Here is the code I have for the specific page shown in the screenshot: https://i.sstatic.net/57o2Z.jpg I want to change 'Replay course' to 'Access course'. Can anyone help me figure out what I'm missing? a.course-card__resume { d ...

csscss-selectors

Increasing the font size by 1px for each element within a specified parent element

Is there a method to automatically increase the font size of all elements within the .wrap container by 1px, without having to adjust each one individually? .wrap{ margin-top: 169px; .element1{ font-size:31px; } .element2{ ...

csssassfont-size

Tips for assigning date ranges to arrays and then conducting comparisons with date input information

I'm developing an application with two date input fields. The current function I have calculates the sum of the digits in each field until it reaches a single digit, and then displays the result along with some text. Now, I need to create another fun ...

javascripthtmlcssfunction

Focus on a particular div in order to enable scrolling beyond its boundaries

Whenever I move my mouse over the div tag, I am able to scroll the content. However, if I move the mouse outside of the div box, scrolling stops. Is there a way to make the specific div element track the mouse pointer no matter where it goes? <div st ...

javascriptjqueryhtml

Moving the Bootstrap-5 navbar button in a horizontal direction from left to right

I am looking to reposition the buttons on this bootstrap5 navbar from the left side to the right side. I need help figuring out how to accomplish this using css or bootstrap5. Can anyone provide some guidance? Here is my current code: <link href=" ...

htmlcsstwitter-bootstrapbootstrap-5

Attempting to create a JavaScript class within an HTML document

Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...

javascriptjqueryhtmlnode.js

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

Is it possible to redirect my PDF File to my PHP homepage?

Hi there, I've been looking for a solution to my issue. I have been using TCPDF-master to create a PDF report. However, after generating the PDF file and printing it out, I am unsure of how to redirect back to my transaction page. My current setup inv ...

phphtmlpdfmysqlitcpdf

Is there a way to invoke an AngularJS function using JavaScript without specifying the ID parameter?

I am interested in invoking an AngularJS function without relying on the use of an id parameter. My current method for calling the AngularJS function is shown below: JS File: angular.element(document.getElementById('service_search')).scope().s ...

javascripthtmlangularjsfunction