Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4.

<div class="container">
  <div class="row">
    <a class="col-2">
      1 of 2
    </a>
    <input type="checkbox" class="invisible" >
    <input type="text" class="col-10" value="2 of 2">
  </div>  
</div>

Even though I applied the invisible class, the checkbox is not visible but still takes up space of 13px.

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

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

Is there a way to use column elements to fill the row with a hidden element in the center?

Here is an example of what my current setup looks like: https://jsfiddle.net/j6h93rve/1/

And here is what I am aiming for: https://jsfiddle.net/fybmkp7e/

htmlcssbootstrap-4

Answer №1

It may be advisable to utilize the d-none class instead of the invisible class

  • d-none - display: none
  • invisible - visibility: hidden

fiddle

Answer №2

Try utilizing the d-none class instead of using invisible, it should function properly.

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

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss

Text is overflowing from the table cell due to its length

UPDATE: I have included a screenshot for reference. My goal is to ensure that the text within the grid container does not scroll horizontally and instead fits within the available space. https://i.stack.imgur.com/CfFuy.png In my React Material-UI table, ...

cssreactjsmaterial-ui

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

I need some assistance with a specific topic. In my scenario, I have two textboxes on my view. I want the value generated in my controller to be applied to textbox2 when there is a change in textbox1. For instance, if I enter a username in textbox1, textb ...

javascripthtmlasp.netajaxasp.net-mvc

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

javascriptphpjqueryhtmlajax

using jquery to trap anchor in unordered list items

This section is dedicated to the menu on the website. The code for this menu can be found in the _Layout.cshtml() page. When the 'Neu Gesellschaft' page loads, I want to change the CSS of the anchor tag a. I attempted the following jQuery code: ...

jqueryhtmlcss

Ensuring Consistent Placement of Elements Regardless of Screen Size with CSS

I'm currently working on an Ionic App and I need to position some buttons (stacked vertically) at the bottom-left corner of the device's screen. Here is the CSS I am using: .button { left = "1em"; z-index = "13"; overflow = "scroll"; ...

htmlcssposition

What is the best way to determine the maximum `width` in a `translateX` animation?

I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have: <div class="wrapper"> <div class="image-container"> <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"> ...

htmlcssreactjsanimationcss-animations

Tips for integrating YouTube links into PHP

As someone who is relatively new to PHP, I am currently working on pulling information from an AirTable database and displaying it on a webpage, which I have successfully done. Now, I need to include a video along with the numerical data, with each set of ...

phphtml

Retrieve the title of the item by selecting it within the h1 tag using Beautiful Soup

import requests from bs4 import BeautifulSoup def fetch_webpage(url): response = requests.get(url) if not response.ok: print('Server Responded: ', response.status_code) else: soup = BeautifulSoup(response.text, 'lxml') ...

pythonhtmlpython-3.xbeautifulsouppython-requests

As the Div descends, it endeavors to maintain alignment with its counterparts

My webpage has a parent div with multiple child divs in one row. These child divs are generated dynamically, so I don't know how many will be displayed at once. The parent div has a fixed width and a horizontal scrollbar appears when all child divs ar ...

htmlcss

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Turn off automatic resizing of iframes

I'm currently dealing with a webpage that contains an iframe. The iframe contains quite a bit of data, and every time it loads, its height adjusts to match the content within. Unfortunately, this is causing my page layout to be disrupted. Is there a w ...

htmlcssiframescroll

Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...

javascripthtmlcssvue.jsvuetify.js

Switching back and forth between classes prevents the animation from playing continuously, causing it to jump straight to the end

Currently, I am in the process of animating a hamburger menu with a unique twist. The idea is to have the top and bottom lines smoothly translate to the middle and then elegantly rotate into an X shape when clicked. My approach involves toggling between tw ...

javascripthtmljquerycsscss-animations

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canva ...

cssangularjs

What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors): I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code. HTML ...

css

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

csstwitter-bootstrapbootstrap-4

Looking for a search box that functions like Google's search feature

I am attempting to create a text box similar to the Google search text box... So far, I have implemented a feature where, upon entering a character, words starting with that character are displayed in a div using AJAX. This functionality is working well, ...

phpjqueryhtmlajax

Make the table width 100%, but we don't want the central cell to be stretched

My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...

htmlcss