Increase the width of columns when hiding additional columns

I have the following HTML and CSS code. If one of the columns is hidden, I would like the other 3 columns to expand. I don't believe using col-md-3 will work in this situation.

Is there a way to achieve this?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3" *ngIf="hideCol1">
    Column 1
  </div>
  <div class="col-md-3" *ngIf="hideCol2">
    Column 2
  </div>
  <div class="col-md-3" *ngIf="hideCol3">
    Column 3
  </div>
  <div class="col-md-3" *ngIf="hideCol4">
    Column 4
  </div>
</div>

cssangularbootstrap-4

Answer №1

To automatically adjust columns, you can utilize the col-md (or just col) class.

With flexbox, grid columns will automatically be set as equal width columns when no specific width is specified. This means that four instances of .col-sm will each be 25% wide from the small breakpoint and above. Check out the auto-layout columns section for more examples. https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md" *ngIf="hideCol1">
    Column 1
  </div>
  <div class="col-md" *ngIf="hideCol2">
    Column 2
  </div>
  <div class="col-md" *ngIf="hideCol3">
    Column 3
  </div>
  <div class="col-md" *ngIf="hideCol4">
    Column 4
  </div>
</div>

Answer №2

In the scenario where you hide a column using *ngIf and want the other columns to dynamically resize themselves, simply assign each column's class as "col" instead of specifying specific column sizes.

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

Styling QSpinBoxes in QColorDialog without affecting QAbstractSpinBox styling with QSS

To give our Qt desktop application a stylish look, I have been utilizing Jorgen-VikingGod's impressive QSS framework as a foundation. Unfortunately, we encountered a hurdle when it came to usability on a dated tablet device running Windows. The tiny s ...

cssqtqtstylesheets

A guide on implementing RxJS Observables to target a specific DIV element

Currently, I am working with Angular 2. At the moment, I have been using this method to select a specific DIV element: <div #aaa> </div> @ViewChild('aaa') private aaa: ElementRef; ngAfterViewInit() { let item = this.aaa.nativeEle ...

typescriptangularrxjsrxjs5

Is there a way to have a single background image fill the entire screen?

Can someone help me with my Offcanvas navbar created using Bootstrap? I added a background image from Google as the URL, but instead of one whole piece, it's appearing as 6 duplicate images. What could be the issue here? I tried looking for solutions ...

cssbootstrap-5background-image

Tips for dynamically changing the style (color/fill) of material-ui elements when generating them within a map function

I am struggling to dynamically change the style (colors) of elements in list items generated from a map function that includes rgb-color values. While using classes can work, trying to dynamically set the style based on the data/color provided in the objec ...

cssreact-nativematerial-ui

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

Angular is having trouble progressing after a stylesheet has been chosen

$ ng new my-app ? Do you want to include Angular routing in your project? Yes ? Which stylesheet format do you prefer to use? CSS Unfortunately, the next steps are not proceeding as expected. The process seems to be stuck and even keyboard shortcuts like ...

node.jsangularnpmangular-cli

Is there a potential white-space issue with jQuery CSS in Internet Explorer versions 7 and 8

Recently, we encountered an unusual issue with jQuery and CSS while working on compatibility with IE7 and IE8. Our project involves animations and height measurements, and during the animations, we wanted to prevent text from wrapping. To achieve this, we ...

jquerycss

Is it possible to connect ng-model with a style tag?

Is it feasible to create a basic template editor using angularjs where an input field with an ng-model can be connected to a style tag to control the css on an entire page rather than applying it to a specific element with inline styling? Could something ...

javascripthtmlcssangularjs

jQuery UI dynamically adjusting content layout based on browser size changes

Having an issue with my custom accordion script where resizing the browser causes formatting problems in one of the sections. I want the content to remain intact and to utilize a scrollbar if necessary to view the content. The problem is visible in section ...

javascriptjqueryhtmlcssjquery-ui

The kendo-chart-tooltip script is causing an error by generating an Uncaught TypeError: background.isDark is not a recognized function

Click here for image descriptionHaving issues with the kendo-chart-tooltip functionality in my Angular 5 platform. The console shows a script error related to 'background.isDark' not being a function. zone.js:192 Uncaught TypeError: back ...

javascriptangularkendo-uikendo-gridkendo-chart

I am looking to display an image as a value in the dropdown menu of my Contact Form 7 on my WordPress website

I am currently working on a Wordpress website where I have a page showcasing 50 different company logos. Below the logo section, there is a form created using Contact Form 7. The logo section was built using a combination of HTML and CSS. Within the form ...

javascripthtmljquerycsswordpress

Customizing Mouse Pointers in CSS

My goal is to customize the click pointer on a website using CSS. I have successfully changed the default cursor, but now I am seeking help in changing different 'versions' of the cursor. Here's my current attempt at customizing the pointe ...

csscursormouse

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

Increase the top spacing of a group of inline div elements by applying margin-top or padding-top

I need to adjust my example code so that there is more space at the top of the second row, without splitting them into two rows. Is there a way to add padding to the top of each div for better alignment? Here's the code I've been working with, a ...

htmlcssinlinepadding

Looking to have images and text aligned horizontally within a grid layout?

<div> <button style=" padding: 10px 16px 10px 16px; vertical-align: middle; margin: auto; width: 32%;"> <img style=" width: 22px; height: 22px; vertical-align: middle; " src="https://upload.wikimedia.org/wiki ...

htmlcss

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

htmlcssangular

Adding bootsprap css-4 to an Angular Java project using Maven

I have developed an Angular application with a Java-Spring backend framework. I have successfully built both the frontend and backend using Maven. To build the Angular application, I utilized the frontend-maven-plugin and installed Bootstrap 4 by running: ...

javanode.jsangularmavennpm

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

MAT_DIALOG_DATA not being passed to Angular Material dialog when opened from canActivate function

I am currently facing an issue where I need to read a query param on a specific route in the canActivate function. If the query param is not present, I want to display a modal indicating that the operation cannot proceed. Upon further consideration, I rea ...

angulardependency-injectionangular-materialangular-dependency-injection

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates