bootstrap-4

Angular 5 GET request nonresponsive

时光总嘲笑我的痴心妄想 提交于 2019-12-25 00:13:57
问题 I've seen many similar problems regarding this problem on this site, but they tend to be either too specific (with Django, Python, Spring, etc) or too outdated. I am using Angular 5 and Bootstrap, using Chrome to debug, and my GET request does not GET, or give me any errors, or do anything, really. With zero output, I am not sure what I'm doing wrong. My .ts file code: onNameKeyUp(event:any) { this.id = event.target.value; //sets input to the object's id this.found = false; } getProf() { this

How to animate Bootstrap 4 cards one by one?

泪湿孤枕 提交于 2019-12-24 23:06:40
问题 I need help to animate cards in bootstrap 4. I have 4 card boxes as shown in image below, it's a simple bootstrap 4 cards deck with 4 card boxes. I am trying to slide each boxes one by one from right whenever user scroll to this section. how to achieve it? I am not trying to make slider/carousel. For reference check this codepen 4 boxes each needs to come from right. In the codepen above all comes at once and from left. I need it from right and one by one, when user scrolls to the section.

Cant use css modules in React with Bootstrap4

假如想象 提交于 2019-12-24 21:30:21
问题 I want to use React CSS modules with Bootstrap. First, I created a project with the create-react-app command. Then, I installed Bootstrap 4 with NPM and included it in my app.js like: import 'bootstrap/dist/css/bootstrap.css'; I also did npm eject to have access to my Webpack config file. Meanwhile I wanted to use CSS modules in my layout.js file, so I went to webpack.config.dev.js and changed modules to true: test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve(

Convert horizontal tab from Bootstrap 3 to Bootstrap 4

别来无恙 提交于 2019-12-24 21:15:00
问题 I have a code from bootsnip to make horizontal Bootstrap tabs with style like material. I'm having trouble converting it to Bootstrap 4. I'm focusing on changing the style of li to .nav-item and a to .nav-link in css. but the result is different. this the code using Bootstrap 3: horizontal tab and this is my code use Bootstrap 4: .no-style{ text-decoration:none!important; } .nav-tabs { background-color:#333; border-bottom: 2px solid #DDD; } .nav-tabs > .nav-item > .nav-link.active, .nav-tabs

Creating custom grid number (24) for Bootstrap 4 [duplicate]

萝らか妹 提交于 2019-12-24 21:05:56
问题 This question already has answers here : How to get bootstrap 4 24 grid (2 answers) Closed 2 years ago . I have a project and I want to integrate some bootstrap into my html files for ui development. I know that the standard grid size is 12 and I wanted to change the number of grid spaces from 12 to 24. I know there is a way to do it from the documentation but I dont know how to where to integrate it. This is the bootstrap documentation $grid-columns: 12 !default; $grid-gutter-width-base:

Extracting sender info in jQuery for Bootstrap iframe modal

眉间皱痕 提交于 2019-12-24 21:03:15
问题 I'm attempting to display a Google Map in a modal in Bootstrap 4.0 Beta. I found this post and the code works, but I'm not "fluent" enough in jQuery to do in Javascript what I need it to do. I also took a look here to figure out how to get the sender, but I can't figure it out. Let's say my <button> is declared like so: <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?a-whole-bunch-of-gibberish"><i

How can i fix IE image and column flexbox bug?

不羁岁月 提交于 2019-12-24 20:23:54
问题 I've made a resizable template using bootstrap4 css. In OK in all browsers except IE 11.0. To be sure .d-flex class doesn't works properly (I've used it to make all of my columns of the same height). Googling for solution doesn't make progress. If I remove this class all seems to be OK except the same height of columns. But the most interesting thing happens with images - they really displayed at full size in ie. Also tried different fixes from here - Bootstrap Image Responsive messed up on

Limit number of cards per card deck in Bootstrap 4

柔情痞子 提交于 2019-12-24 20:04:26
问题 I'm trying to display up to 2 cards in a card deck. If there are any additional cards to display, they should be placed in a new deck, below the previous one. How can I achieve this? Where can I specify the maximum number of cards for each deck? The HTML looks like this (with a little bit of Angular): <div class="card-deck"> <div *ngFor="let item of dataService.getItems()" class="card"> <div class="card-body"> <h4 class="card-title">{{ item.title }}</h4> <p class="card-text">{{ item.content }

N number of columns in Bootstrap 4

拈花ヽ惹草 提交于 2019-12-24 19:45:35
问题 I'm creating a online shop. I need to have 3 items per row with some space left over. So my idea was a column of 9 with 3 child columns of. Then I have 3 columns left over from the 9 for whaterever else I choose. My issue is in a few categories I have 4/5 items. So they all appear on 1 line. How can I solved this. <div class="container"> <div class="row"> <div class="col-md-9"> <div class="row"> @foreach ($items as $item) <div class="col-md-3"> <img class="list-image" src="{{$item->image}}">

Opening new SMS on iOS in web app mode with HTML5 link from within Bootstrap popup

时间秒杀一切 提交于 2019-12-24 19:26:03
问题 Fairly specific here; I'm wanting to open a new blank text message to a particular phone number in a web app on iOS. I need this link in a Bootstrap popover. (Ref - https://getbootstrap.com/docs/4.0/components/popovers/) The following SMS link works on iOS inside a popover (with Bootstrap 4.1.3) and has done what I want in web app mode on iOS: <a href='#' onclick='window.open(`sms:1112225555`, `_self`);'>Link</a> But I'd like to upgrade to the latest Bootstrap (4.4.1) which sanitizes popover