bootstrap-4

**[Solved]** Image size messed up when running website on a mobile device

由 ╄→гoц情女王★ 提交于 2021-01-29 12:40:31
问题 [Solved] So I have an image that I want to display behind some text. It works fine when I open the website on my desktop browser. Even going into mobile mode from console does not show any problems. However, after deploying the website, when I open it on an actual mobile device, the image is stretched out. I tried making width and height auto and allowing max-width to be 100% but screws up the image in other ways. This is how it shows on desktop https://i.stack.imgur.com/9yyta.png. This is

Bootstrap: Unwanted accordion behaviour

由 隐身守侯 提交于 2021-01-29 11:48:56
问题 The following code works fine....except.... I don't want to expand or callapse a row when the user clicks a checkbox. How can I block this? (I have jquery plugged in. I'm wondering if I can use this to solve the problem?) <table class="table table-hover"> <thead> <td> <h5>Select All:</h5> </td> <td> <h5><input type="checkbox" id="checkAll"></h5> </td> </thead> <tbody> <tr> <td colspan="2"> <input type="submit" , value="Replace Selected"> </td> </tr> <tr class="accordion-toggle" data-toggle=

Angular @types/bootstrap error: Namespace 'popper.js' has no exported member

由 那年仲夏 提交于 2021-01-29 10:44:20
问题 I've done a fair amount of searching and have been unable to come up with any guidance on an error - the one article I found seems to indicate that it may just be a version compatibility issue, but I am unsure of whether that's actually the case. I have used npm install @types/bootstrap , along with its dependencies @popper.js and @jquery . When I run ng serve , I get this error: ERROR in node_modules/@types/bootstrap/index.d.ts(35,29): error TS2694: Namespace ''popper.js'' has no exported

Bootstrap toast - Data delay not respected - Toast dont hide

由 人盡茶涼 提交于 2021-01-29 09:56:19
问题 After hit the submit button of a form (Ajax POST) I want to refresh the toast with the message generated in Django view. I succeed to show the message but the data-delay is not respected, the toast does not disappear after 5 sec. <div id="messages" aria-live="polite" aria-atomic="true" style="position: relative"> <div style="position: absolute; top: 12px; right: 12px;" > {% for message in messages %} <div class="toast d-flex toast-success" role="alert" aria-live="assertive" aria-atomic="true"

Instafeed JS not loading

由 泄露秘密 提交于 2021-01-29 09:55:57
问题 I'm trying to test out instafeed.js and I can't get it to load on a simple bootstrap page Everything on my page loads, including this container, but it's empty with no hint of Instagram code. I downloaded the instafeed js folder, in my root directory. The working file is in the same folder as this instafeed folder, and the min.js file is in there. Obviously, my client ID was omitted, but other than that, what could I be doing wrong here? Here is my current code block pertaining to this: <head

How to place a tooltip for the react-bootstrap tab component

由 馋奶兔 提交于 2021-01-29 09:40:46
问题 I have three tabs , I need to place a tool tip on hover on those tabs,I am using bootstrap tabs.(Its a react application.) import { Tabs,Tab} from "react-bootstrap"; // inside return <Tabs variant="pills" className="mb-3" activeKey={key} > <Tab eventKey="managed" title="Managed" Tooltip="hello"/> <Tab eventKey="unmanaged" title="Unmanaged"/> <Tab eventKey="source" title="Source"/> </Tabs> I need a tool tip appear whenever the Mouse pointer is placed on the Tab Header, for example I need a

Bootstrap 4 Validation reCaptcha

由 假装没事ソ 提交于 2021-01-29 09:37:34
问题 Since Bootstrap 4 has their own form validation i like to add the Google Invisible reCaptcha to it. But how can i activate grecaptcha.execute(); in the javascript to make it work? It should execute the reCaptcha after Bootstrap Validation was successfull and not before. Here is my code: <?php if($_SERVER["REQUEST_METHOD"] === "POST") { // Google reCaptcha $ip = $_SERVER['REMOTE_ADDR']; $api_response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."

why bootstrap class d-sm-none still displays image in small screen

由 别来无恙 提交于 2021-01-29 08:44:57
问题 I desire a row with 2 columns by using bootstrap4: 1st column takes size 9 in all viewports 2nd column takes size 3 in lg and md but disappears in sm viewport. I tried the following with d-none / d-sm-none but it does not work as expected <div class="container"> <div class="row"> <div class="col-lg-9 col-md-9"> <h1>Col-1: MD-9 or LG-9</h1> </div> <div class="col-lg-3 col-md-3 d-sm-none"> <h1>Col-2: MD-3, LG-3, SM NONE</h1> </div> </div> </div> d-none disappears 2nd column regardless the

Bootstrap 4 Cards Same Height and Bottom Justified

由 我们两清 提交于 2021-01-29 07:51:10
问题 I'm trying to align Bootstrap 4 cards and using d-flex along with align-self-stretch for the cards themselves. Which is great. However, I can't figure out how to get the part with the red border to float to the bottom. Any ideas by using Bootstrap 4 utilities only? <div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch"> <div class="card shadow-sm mb-4"> <img src="https://placehold.it/500x300" class="card-img-top" alt=""> <div class="card-body"> <h5 class="card-title text-uppercase

Prevent Content From Extending Outside of Div (and make it scroll)

由 狂风中的少年 提交于 2021-01-29 07:13:01
问题 I have some basic markup (using Bootstrap 4): <div class="card shadow m-3" style="width:500px; height: 280px"> <div class="card-body"> <div class="row"> <div class="col-3 mb-2"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail"> </div> <div class="col-3 mb-2"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"
订阅 bootstrap-4