kandi background
Explore Kits

bootstrap | popular HTML , CSS , and JavaScript framework | Theme library

 by   twbs JavaScript Version: v4.6.1 License: MIT

 by   twbs JavaScript Version: v4.6.1 License: MIT

Download this library from

kandi X-RAY | bootstrap Summary

bootstrap is a JavaScript library typically used in User Interface, Theme, Angular, React, Bootstrap, jQuery, Gulp applications. bootstrap has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i democracyos-bootstrap' or download it from GitHub, npm.
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feature · Themes · Blog.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • bootstrap has a medium active ecosystem.
  • It has 156587 star(s) with 76545 fork(s). There are 6939 watchers for this library.
  • There were 3 major release(s) in the last 12 months.
  • There are 220 open issues and 20954 have been closed. On average issues are closed in 591 days. There are 118 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of bootstrap is v4.6.1
bootstrap Support
Best in #Theme
Average in #Theme
bootstrap Support
Best in #Theme
Average in #Theme

quality kandi Quality

  • bootstrap has 0 bugs and 0 code smells.
bootstrap Quality
Best in #Theme
Average in #Theme
bootstrap Quality
Best in #Theme
Average in #Theme

securitySecurity

  • bootstrap has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • bootstrap code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
bootstrap Security
Best in #Theme
Average in #Theme
bootstrap Security
Best in #Theme
Average in #Theme

license License

  • bootstrap is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
bootstrap License
Best in #Theme
Average in #Theme
bootstrap License
Best in #Theme
Average in #Theme

buildReuse

  • bootstrap releases are available to install and integrate.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
  • bootstrap saves you 25386 person hours of effort in developing the same functionality from scratch.
  • It has 24631 lines of code, 0 functions and 244 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
bootstrap Reuse
Best in #Theme
Average in #Theme
bootstrap Reuse
Best in #Theme
Average in #Theme
Top functions reviewed by kandi - BETA

kandi has reviewed bootstrap and discovered the below as its top functions. This is intended to give you an instant insight into bootstrap implemented functionality, and help decide if they suit your requirements.

  • Create a new popper generator
  • Checks if an option overlaps control placement .
  • Flip the given argument .
  • Map Typed styles .
  • Computes the offsets of the reference
  • Default overflow handler .
  • Adds a custom event handler for the given element
  • Effectively change styling
  • Computes the popper style for each node
  • Gets the composite rect of an element .

bootstrap Key Features

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

What's included

copy iconCopydownload iconDownload
bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

The unauthenticated git protocol on port 9418 is no longer supported

copy iconCopydownload iconDownload
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
git config --global url."https://".insteadOf git://
-----------------------
[remote "upstream"]
    url = git://github.com/curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
[remote "upstream"]
    url = git@github.com:curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
-----------------------
[remote "upstream"]
    url = git://github.com/curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
[remote "upstream"]
    url = git@github.com:curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
-----------------------
git config --global url."https://github".insteadOf git://github
Unhandled rejection Error: Command failed: /usr/bin/git submodule update -q --init --recursive
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
fatal: remote error:
  The unauthenticated git protocol on port 9418 is no longer supported.
Please see https://github.blog/2021-09-01-improving-git-protocol-security-github/ for more information.
fatal: clone of 'git://github.com/jquery/sizzle.git' into submodule path '/root/.npm/_cacache/tmp/git-clone-19674e32/src/sizzle' failed
Failed to clone 'src/sizzle'. Retry scheduled
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
-----------------------
git config --global url."https://github".insteadOf git://github
Unhandled rejection Error: Command failed: /usr/bin/git submodule update -q --init --recursive
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
fatal: remote error:
  The unauthenticated git protocol on port 9418 is no longer supported.
Please see https://github.blog/2021-09-01-improving-git-protocol-security-github/ for more information.
fatal: clone of 'git://github.com/jquery/sizzle.git' into submodule path '/root/.npm/_cacache/tmp/git-clone-19674e32/src/sizzle' failed
Failed to clone 'src/sizzle'. Retry scheduled
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
-----------------------
    insteadOf = ssh://
    insteadOf = git://
-----------------------
    insteadOf = ssh://
    insteadOf = git://

Invalid CSS value error while Customizing Bootstrap 5 colors with sass 3

copy iconCopydownload iconDownload
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

Uncaught ReferenceError: Buffer is not defined

copy iconCopydownload iconDownload
const webpack = require('webpack');

module.exports = {
    // ...

    plugins: [
        // Work around for Buffer is undefined:
        // https://github.com/webpack/changelog-v5/issues/10
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ],

    resolve: {
        extensions: [ '.ts', '.js' ],
        fallback: {
            "stream": require.resolve("stream-browserify"),
            "buffer": require.resolve("buffer")
        }
    },

-----------------------
const webpack = require('webpack');

module.exports = {
    // ...

    plugins: [
        // Work around for Buffer is undefined:
        // https://github.com/webpack/changelog-v5/issues/10
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ],

    resolve: {
        extensions: [ '.ts', '.js' ],
        fallback: {
            "stream": require.resolve("stream-browserify"),
            "buffer": require.resolve("buffer")
        }
    },

-----------------------
"buffer": "^6.0.3",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
"react-app-rewired": "^2.2.1" --dev
"scripts": {
    "debug": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
  "scripts": {
    "debug": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
const webpack = require("webpack")

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
    }
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
    ]
    // console.log(config.resolve)
    // console.log(config.plugins)

    return config
}
-----------------------
"buffer": "^6.0.3",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
"react-app-rewired": "^2.2.1" --dev
"scripts": {
    "debug": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
  "scripts": {
    "debug": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
const webpack = require("webpack")

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
    }
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
    ]
    // console.log(config.resolve)
    // console.log(config.plugins)

    return config
}
-----------------------
"buffer": "^6.0.3",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
"react-app-rewired": "^2.2.1" --dev
"scripts": {
    "debug": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
  "scripts": {
    "debug": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
const webpack = require("webpack")

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
    }
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
    ]
    // console.log(config.resolve)
    // console.log(config.plugins)

    return config
}
-----------------------
"buffer": "^6.0.3",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
"react-app-rewired": "^2.2.1" --dev
"scripts": {
    "debug": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
  "scripts": {
    "debug": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
const webpack = require("webpack")

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
    }
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
    ]
    // console.log(config.resolve)
    // console.log(config.plugins)

    return config
}
-----------------------
npm install --save buffer
// webpack.config.js
const webpack = require("webpack");

module.exports = {
  plugins: {
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    // ..
  }
  // ..
}
-----------------------
npm install --save buffer
// webpack.config.js
const webpack = require("webpack");

module.exports = {
  plugins: {
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    // ..
  }
  // ..
}

Bootstrap 5 - Custom theme-colors not updating classes

copy iconCopydownload iconDownload
$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$dark: $tertiary;

-----------------------
$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$dark: $tertiary;

-----------------------
$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$dark: $tertiary;

-----------------------
@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";
@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";
-----------------------
@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";
@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";
-----------------------
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};
<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>
-----------------------
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};
<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>
-----------------------
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};
<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

copy iconCopydownload iconDownload
npm update vue-loader
npm i vue-loader
-----------------------
npm update vue-loader
npm i vue-loader
-----------------------
npm update vue-loader

How to fix: &quot;@angular/fire&quot;' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

copy iconCopydownload iconDownload
import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
-----------------------
"@angular/fire": "~7.0.4",
"firebase": "~9.0.2",
-----------------------
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';````

here is the link https://firebase.google.com/docs/web/modular-upgrade

Enjoy!!!!
-----------------------
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

Create new color scheme for dark-light mode in bootstrap sass

copy iconCopydownload iconDownload
@import "functions";
@import "variables";
@import "mixins";


.dark {

    /* redefine theme colors for dark theme */
    $primary: #012345;
    $secondary: #111111;
    $success: #222222;
    $dark: #000;
    
    $theme-colors: (
        "primary": $primary,
        "secondary": $secondary,
        "success": $success,
        "danger": $danger,
        "info": $indigo,
        "dark": $dark,
        "light": $light,
    );

    /* redefine theme color variables */
    @each $color, $value in $theme-colors {
        --#{$variable-prefix}#{$color}: #{$value};
    }

    /* redefine theme color rgb vars (used for bg- colors) */
    $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
    @each $color, $value in $theme-colors-rgb {
        --#{$variable-prefix}#{$color}-rgb: #{$value};
    }

    $body-color: #eeeeee;
    $body-bg: #263C5C;
    
    --#{$variable-prefix}body-color: #{$body-color};
    --#{$variable-prefix}body-bg: #{$body-bg};
      
    @import "bootstrap";
}

Bootstrap 5 floating labels in an input group

copy iconCopydownload iconDownload
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
-----------------------
.form-floating-group input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating form-floating-group flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
-----------------------
.form-floating-group input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating form-floating-group flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
-----------------------
.input-group .form-floating input {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
-----------------------
<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
-----------------------
<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
-----------------------
<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
-----------------------
<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
-----------------------
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-5">
  <div class="input-group">
    <div class="flex-grow-1 form-floating">
      <input placeholder="Search address" aria-label="Search address" aria-describedby="basic-wallet" type="text" class="rounded-0 rounded-start form-control" value="New York">
      <label>Your wallet address</label>
    </div>
    <span class="input-group-text"><i class="fas fa-times"></i></span>
  </div>
</div>

django rest Error - AttributeError: module 'collections' has no attribute 'MutableMapping'

copy iconCopydownload iconDownload
Warning (from warnings module):
  File "<pyshell#1>", line 1
DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated since Python 3.3, and in 3.10 it will stop working
FROM python:3.9.7-alpine3.14

...
-----------------------
Warning (from warnings module):
  File "<pyshell#1>", line 1
DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated since Python 3.3, and in 3.10 it will stop working
FROM python:3.9.7-alpine3.14

...

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: &gt; Unexpected &quot;$&quot;

copy iconCopydownload iconDownload
"angularCompilerOptions": {"enableIvy": false}
ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force
ng update @angular/core@12 @angular/cli@12 --force
ng update @angular/core --force
-----------------------
"angularCompilerOptions": {"enableIvy": false}
ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force
ng update @angular/core@12 @angular/cli@12 --force
ng update @angular/core --force
-----------------------
"angularCompilerOptions": {"enableIvy": false}
ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force
ng update @angular/core@12 @angular/cli@12 --force
ng update @angular/core --force
-----------------------
"architect": {
    "build": {
      "builder": "ngx-build-plus:build",
      "options": {
        "aot": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "tsConfig": "src/tsconfig.app.json",
        "polyfills": "src/polyfills.ts",
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
}
}
-----------------------
npm install node-sass@latest 
-----------------------
"assets": [
    "src/favicon.ico",
    {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": ["**/*.scss"],
        "output": "/assets/"
    },
    ...
]
-----------------------
singleSpaWebpackConfig.optimization.minimizer = singleSpaWebpackConfig.optimization.minimizer
.filter(plugin => plugin.constructor.name !== 'CssMinimizerPlugin' || plugin.options?.test?.toString().indexOf('less') === -1);
-----------------------
// >> projects[YOUR_PROJECT_NAME].architect.build.configurations
"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  },
// >> projects[YOUR_PROJECT_NAME].architect.serve
"serve": {
  "defaultConfiguration": "development",
  "configurations": {
    "development": {
      "browserTarget": "YOUR_PROJECT_NAME:build:development"
    },

Community Discussions

Trending Discussions on bootstrap
  • The unauthenticated git protocol on port 9418 is no longer supported
  • Invalid CSS value error while Customizing Bootstrap 5 colors with sass 3
  • Uncaught ReferenceError: Buffer is not defined
  • Bootstrap 5 - Custom theme-colors not updating classes
  • Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:
  • How to fix: &quot;@angular/fire&quot;' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular
  • Create new color scheme for dark-light mode in bootstrap sass
  • Bootstrap 5 floating labels in an input group
  • django rest Error - AttributeError: module 'collections' has no attribute 'MutableMapping'
  • Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: &gt; Unexpected &quot;$&quot;
Trending Discussions on bootstrap

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

Command: git
Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
Directory: /home/runner/work/stackstream-fe/stackstream-fe
Output:
fatal: remote error: 
  The unauthenticated git protocol on port 9418 is no longer supported.

Upon investigation, it appears that below section in my yml file is causing the issue.

    - name: Installing modules
      run: yarn install

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

  steps:
  - name: Checkout
    uses: actions/checkout@v2

  - id: vars
    run: |
      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi

  - uses: pCYSl5EDgo/cat@master
    id: slack
    with:
      path: .github/workflows/slack.txt

  - name: Slack Start Notification
    uses: 8398a7/action-slack@v3
    env:
      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
      COLOR: good
      STATUS: '`Started`'
    with:
      status: custom
      fields: workflow,job,commit,repo,ref,author,took
      custom_payload: |
        ${{ steps.slack.outputs.text }}

  - name: Installing modules
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn install

  - name: Create Frontend Build
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn build

  - name: Deploy to Frontend Server DEV
    if: ${{ contains(github.ref, 'dev') }}
    uses: easingthemes/ssh-deploy@v2.1.5
    env:
      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
      ARGS: '-rltgoDzvO --delete'
      SOURCE: 'deploy/'
      REMOTE_HOST: ${{ secrets.DEV_HOST }}
      REMOTE_USER: plyfolio-dev
      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'

package.json file

   {
  "name": "stackstream-fe",
  "version": "1.0.0",
  "authors": [
    "fayyaznofal@gmail.com"
  ],
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fullcalendar/bootstrap": "^5.5.0",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/interaction": "^5.5.0",
    "@fullcalendar/react": "^5.5.0",
    "@lourenci/react-kanban": "^2.1.0",
    "@redux-saga/simple-saga-monitor": "^1.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@toast-ui/react-chart": "^1.0.2",
    "@types/jest": "^26.0.14",
    "@types/node": "^14.10.3",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "@vtaits/react-color-picker": "^0.1.1",
    "apexcharts": "^3.23.1",
    "availity-reactstrap-validation": "^2.7.0",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "axios-progress-bar": "^1.2.0",
    "bootstrap": "^5.0.0-beta2",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "classnames": "^2.2.6",
    "components": "^0.1.0",
    "dotenv": "^8.2.0",
    "draft-js": "^0.11.7",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "firebase": "^8.2.3",
    "google-maps-react": "^2.0.6",
    "history": "^4.10.1",
    "i": "^0.3.6",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "jsonwebtoken": "^8.5.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "lodash.get": "^4.4.2",
    "metismenujs": "^1.2.1",
    "mkdirp": "^1.0.4",
    "moment": "2.29.1",
    "moment-timezone": "^0.5.32",
    "nouislider-react": "^3.3.9",
    "npm": "^7.6.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.14.0",
    "react": "^16.13.1",
    "react-apexcharts": "^1.3.7",
    "react-auth-code-input": "^1.0.0",
    "react-avatar": "^3.10.0",
    "react-bootstrap": "^1.5.0",
    "react-bootstrap-editable": "^0.8.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.11.1",
    "react-color": "^2.19.3",
    "react-confirm-alert": "^2.7.0",
    "react-content-loader": "^6.0.1",
    "react-countdown": "^2.3.1",
    "react-countup": "^4.3.3",
    "react-cropper": "^2.1.4",
    "react-data-table-component": "^6.11.8",
    "react-date-picker": "^8.0.6",
    "react-datepicker": "^3.4.1",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-drag-listview": "^0.1.8",
    "react-drawer": "^1.3.4",
    "react-dropzone": "^11.2.4",
    "react-dual-listbox": "^2.0.0",
    "react-facebook-login": "^4.1.1",
    "react-flatpickr": "^3.10.6",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^7.15.2",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.2.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-mask": "^2.0.4",
    "react-jvectormap": "^0.0.16",
    "react-leaflet": "^3.0.5",
    "react-meta-tags": "^1.0.1",
    "react-modal-video": "^1.2.6",
    "react-notifications": "^1.7.2",
    "react-number-format": "^4.7.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rangeslider": "^2.2.0",
    "react-rating": "^2.0.5",
    "react-rating-tooltip": "^1.1.6",
    "react-redux": "^7.2.1",
    "react-responsive-carousel": "^3.2.11",
    "react-router-dom": "^5.2.0",
    "react-script": "^2.0.5",
    "react-scripts": "3.4.3",
    "react-select": "^4.3.1",
    "react-sparklines": "^1.7.0",
    "react-star-ratings": "^2.3.0",
    "react-super-responsive-table": "^5.2.0",
    "react-switch": "^6.0.0",
    "react-table": "^7.6.3",
    "react-toastify": "^7.0.3",
    "react-toastr": "^3.0.0",
    "react-twitter-auth": "0.0.13",
    "reactstrap": "^8.8.1",
    "recharts": "^2.0.8",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sass": "^1.37.5",
    "simplebar-react": "^2.3.0",
    "styled": "^1.0.0",
    "styled-components": "^5.2.1",
    "toastr": "^2.1.4",
    "typescript": "^4.0.2",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "@typescript-eslint/typescript-estree": "^4.15.2",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.2.5",
    "lint-staged": "^10.1.3",
    "prettier": "^1.19.1",
    "react-test-renderer": "^16.13.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build ./deploy/build",
    "build-local": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.


For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

git config --global url."https://github.com/".insteadOf git://github.com/

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

git config --global url."git@github.com:".insteadOf git://github.com/

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install bootstrap

Several quick start options are available:. Read the Getting started page for information on the framework contents, templates, examples, and more.
Download the latest release
Clone the repo: git clone https://github.com/twbs/bootstrap.git
Install with npm: npm install bootstrap
Install with yarn: yarn add bootstrap
Install with Composer: composer require twbs/bootstrap:5.1.3
Install with NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass

Support

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Reuse Pre-built Kits with bootstrap
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.