Categories
Bootstrap Development

How to remove spacing between links with Bootstrap 3?

I’m trying to recreate 4 ‘buttons’ for a web view of an app that are static and in a fixed position on mobile view only. The idea is they take up 100% of the width of the screen to make it seem like a native app. However, there looks to be spacing between each element […]

Categories
Bootstrap Development

Bootstrap 4 Navbar Dropdown Menu Links

I have a navbar that is baffling me. The hamburger menu opens just fine and the dropdown list opens fine too but the links within the dropdown is not clickable. When I click on it, it just closes again. the behavior is the same for desktop and mobile. I got the code from a blogger’s […]

Categories
Bootstrap Development

using terraform template_file and s3 to bootstrap with s3

We are trying to keep bootstrapping user_data configuration files in S3. But we also have a need to variables and manage secrets for parts of the user data scripts. So my thought was to create a bucket, store our scripts, then use template_file from s3. Then shove that rendered template into the user_data for my […]

Categories
Bootstrap CMS Development Wordpress

WP Bootstrap Navwalker not displaying ‘current-menu-item’ class

Here’s how my output HTML <!– Navigation –> <header class=”nav”> <div class=”nav__holder nav–sticky”> <div class=”container-fluid nav__container nav__container–side-padding”> <div class=”flex-parent”> <div class=”nav__header”> <!– Logo –> <a href=”index.html” class=”logo-container flex-child”> <img class=”logo” src=”#”> </a> <!– Mobile toggle –> <button type=”button” class=”nav__icon-toggle” id=”nav__icon-toggle” data-toggle=”collapse” data-target=”#navbar-collapse”> <span class=”sr-only”>Toggle navigation</span> <span class=”nav__icon-toggle-bar”></span> <span class=”nav__icon-toggle-bar”></span> <span class=”nav__icon-toggle-bar”></span> </button> </div> <!– Navbar […]

Categories
Bootstrap Development Java

how to load java script variable in to the bootstrap model text box as value

I have some issue in javascript variable load in to the bootstrap model input box: setTimeout(function() { swal({ title: “OverTime Status!”, text: “You Need to get Sub OT Approval ” + data.value + ” Hours to Time allocate in the department”, type: “warning”, confirmButtonText: “OK” }, function(isConfirm) { if (isConfirm) { $(‘#hours_work’).val(data.value); //data.value alert the […]

Categories
Bootstrap Development

Bootstrap 4 Scrollable Div take up remaining middle screen height

I am trying to design a page with Bootstrap 4 with 6 divs, and I need DIV #4 to take up the remaining height and be scrollable. Divs 1-3 will be slightly dynamic and not a fixed height. Div 5 and 6 would be the same. Div 4 should take up the remainder of the […]

Categories
Bootstrap Development

Bootstrap 4 Scrollable Div take up remaining middle screen height

I am trying to design a page with Bootstrap 4 with 6 divs, and I need DIV #4 to take up the remaining height and be scrollable. Divs 1-3 will be slightly dynamic and not a fixed height. Div 5 and 6 would be the same. Div 4 should take up the remainder of the […]

Categories
Bootstrap Development

Dynamically update id and for attribute of bootstrap 4 checkbox using Angular 8

I am using *ngFor to create multiple bootstrap 4 checkboxes. While creating those I am passing ‘id’ and ‘for’ data to keep them unique as given in the below snippet. If we don’t provide unique values they are not getting checked. <div class=”row” *ngFor=”let material of materials”> <div class=”col-sm-12″> <input type=”checkbox” [(ngModel)]=”material.checked” [value]=”material.value” class=”custom-control-input” id=””> […]

Categories
Bootstrap CSS Development

CSS selection by class given in a top div (Bootstrap 4 navbar)

I am using a bootstrap navbar and want to style the li elements in normal an collapsed mode but i dont figure out the right way … all my tries end with style both the same or nothing This is the html output in normal: <nav class=”navbar navbar-expand-md” role=”navigation”> <div class=”container”> <button class=”navbar-toggler collapsed” […]

Categories
Bootstrap Development

How to remove white space between rows when using bootstrap?

I’m creating a product page using bootstrap and was just wondering how to remove the white space between two rows? I’ve highlighted the space that is causing problems, the page itself isn’t finished but I foresee this being an issue I’ll run into again and want to deal with it the now and be able […]