Creating a 3X3 grid in CSS bootstrap through dynamic formation

I am looking to create a 3X3 grid with 8 checkboxes, where the checkboxes are only visible under certain conditions and need to be dynamically filled into the grid. How can this be achieved using CSS and Bootstrap? The checkboxes should be organized from top to bottom and left to right within the grid, with no empty spaces if a checkbox is not visible.

Below is my code for a STATIC arrangement:

<div class="row row-checkbox">
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb1" label="Checkbox1">
              </app-custom-checkbox>
            </div>
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb2" label="Checkbox 2">
              </app-custom-checkbox>
            </div>
            <div class="col-md-4">
              <app-custom-checkbox formControlName="cb3" label="Checkbox 3">
              </app-custom-checkbox>
            </div>
          </div>

          <div class="row row-checkbox">
            <div class="col-md-4">
              <app-custom-checkbox formControlName="cb4" label="Checkbox 4">
              </app-custom-checkbox>
            </div>
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb5" label="Checkbox 5">
              </app-custom-checkbox>
            </div>
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb6" label="Checkbox 6">
              </app-custom-checkbox>
            </div>
          </div>
          <div class="row row-checkbox">
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb7" label="Checkbox 7">
              </app-custom-checkbox>
            </div>
            <div class=" col-md-4">
              <app-custom-checkbox formControlName="cb8" label="Checkbox 8">
              </app-custom-checkbox>
            </div>
          </div>
cssangularbootstrap-5

Answer №1

When creating a grid layout in HTML and CSS, the following code can be used:

HTML:
<div class="container">
  <div class="grid-container">
    <div *ngIf="condition1">
      <input type="checkbox" id="checkbox1">
      <label for="checkbox1">Checkbox 1</label>
    </div>
    <div *ngIf="condition2">
      <input type="checkbox" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </div>
    <div *ngIf="condition3">
      <input type="checkbox" id="checkbox3">
      <label for="checkbox3">Checkbox 3</label>
    </div>
  </div>
</div>

CSS:
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-container div {
  display: flex;
  align-items: center;
}

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

Attention: certain content may have been removed due to HTML sanitation

Hi there, I'm currently working on incorporating a search bar into a modal window by embedding HTML within the modal body. Here's how I've written the code: onClick() { const dialogRef = this.modal.alert() .size('lg' ...

javascriptangulartypescript

"Enhancing Accessibility: Customizing Radio Button Labels in Angular Material for VoiceOver and Screen

I'm experiencing an issue with Angular Material's mat-radio-group and Apple's VoiceOver. When I test it, VoiceOver reads each radio label as "[the label] and one more item". For example, <mat-radio-button value="envelope">Envelope< ...

angularaccessibilityangular-material2voiceover

Exploring the Nested Components Feature in Ionic 4

I am currently in the process of transitioning my application from Ionic 3 to Ionic 4, and I have noticed that async and await calls are now being used for each component. While I understand the reasoning behind this change, in my Ionic 3 app, I had a nest ...

angularionic-frameworkionic4

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...

cssangularfont-awesomeng-build

What is the best way to retrieve both the checked and unchecked values from a collection of checkboxes?

Check Out This live Example: I am in the process of creating a list of checkboxes with various data objects: data = [ { Key: "class_id", displayName: "Section ID", enabled: true }, { Key: "room_l4", displayName: "Location", enabled: false }, { Key: "se ...

javascripthtmlangulartypescript

Sharing information among components in Angular

This is the structure of my page: https://i.sstatic.net/2NgrN.png app.component.html <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> The data loading process occurs in the app.com ...

angular

Tips for aligning a Bootstrap row in the center

I need some help centering this temperature converter on the page. I've tried adjusting the columns and rows, but the alignment is still off. Here is a screenshot for reference: https://i.sstatic.net/xR8rA.png Below is the code I am using: < ...

htmlcssbootstrap-5

What steps do I need to take to ensure the CSS hover effect functions properly?

After conducting a simple test underneath the main divs, I found that it works as intended. However, the primary one is not functioning properly. I attempted to apply the class "services-icon" to the div containing the image, but it still did not work. I ...

htmlcss

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...

csshtml

Is it possible to customize the default styling options in Tailwind?

I am currently working on a blog using NextJS, and I have encountered an issue with Tailwind's list style type. It seems that the default styling for list style type is set to list-none, resulting in my <ul> <li> elements not being styled ...

htmlcssnext.jshtml-liststailwind-css

Tips for implementing a for loop within a Bootstrap-Popover using JavaScript

After spending several days searching for a suitable example to no avail, I decided to bring my specific use case to SO. I currently have three Bootstrap 5 cards. https://i.sstatic.net/zDVOF.png I am looking to create Popovers for each card, with the po ...

javascripthtmlbootstrap-5

The Bootstrap 4 grid system does not automatically use floats

While using bootstrap 4 to develop a website, I encountered an issue where my columns were not floating automatically as expected. I'm not sure if this is a Bootstrap 4 problem or if I am missing something. I know custom CSS can solve the issue, but I ...

htmlcsstwitter-bootstrapbootstrap-4

Include links to external CSS and JS files within an Angular 2 component

To exclusively use "Bootstrap Select" in my.component.ts, I attempted the following approach: @Component({ templateUrl: 'my.component.html', styleUrls: [ 'my.component.css', //Bootstrap Select 'https:/ ...

javascriptcssangular

Issue in Ionic 3 where ion-list does not scroll vertically on iOS devices when ion-items are dynamically generated using ngFor within the ion-list

When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices. Here is the HTML code snippet: < ...

ioscssionic-frameworkscrollionic3

Button for browsing weekly recipes in HTML table format

Seeking assistance in creating a dynamic weekly recipe webpage using HTML and CSS. The goal is to have a form where users can submit a recipe, which will then be added to a specific day of the week in a table displaying all recipes for that day. Can someon ...

htmlcss

Inject a DOM event into a personalized form validator within an Angular application

I'm currently working on validating a form using the reactive approach. I've implemented a file input to allow users to upload files, with custom validation conditions in place. However, I'm encountering an issue where the validator only rec ...

javascriptangulartypescript

How can you exclude templates in an Angular 7 CLI build to incorporate MVC views?

Currently, I am exploring the latest updates in Angular (7+) and CLI. After completing parts of the 'Tour of Heroes' tutorial, I have been able to use 'ng build' to generate production files. However, a key requirement for me is using ...

asp.net-mvcangularangular-cling-build

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

javascriptpythoncssseleniumselenium-webdriver