Bootstrap Starter

PHOTO

Sat Jan 08 2022 14:25:53 GMT+0000 (UTC)

Saved by @lmoore1218 #undefined

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


8
    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



  <container>

    <div class="card-deck">

  <div class="card">

    <img src="..." class="card-img-top" alt="...">

    <div class="card-body">

      <h5 class="card-title">Card title</h5>

      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

    </div>

  </div>

  <div class="card">

https://codepen.io/larry-moore/pen/QXvZoN

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

bootstrap

@lmoore1218

Bootstrap Starter

add property to each object in array javascript using ".map()" Code Example

Results.map(obj=> ({ ...obj, Active: 'false' }))

void main() {
  getNumber();
}

getNumber () {
  print ("Hello");
}

#undefined #child

Edit Themes ‹ Bruna Carolina Santos — WordPress

/*
Theme Name:     Twenty Seventeen Child
Theme URI:      https://wordpress.org/themes/twentyseventeen-child/
Description:    Tema Child per il tema Twenty Thirteen
Author:         Bruna Carolina Santos
Author URI:     
Template:       twentyseventeen
Version:        2.8-wpcom
*/

Edit Themes ‹ Bruna Carolina Santos — WordPress

Customiser Dark Theme

<style>
  /* Root Variables */
  
    :root {
      --fd_Font: inherit;
      --fd_Dark: #ffffff;
      --fd_Bodytext: #d1d1d1;
      --fd_Subtletext: #b7b7b7;
      --fd_Disabledtext: #7d7d7d;
      --fd_Light: #ababab;
      --fd_Pale: #4f4f4f;
      --fd_Background: #000000;
      --fd_Danger: #D80034;
      --fd_Warning: #FF5B21;
      --fd_Success: #1EBA63;
      --fd_Info: #4E65E1;
      --fd_Transparent: transparent;
    }
  </style>
  <link rel="stylesheet" href="https://d2bzmcrmv4mdka.cloudfront.net/production/ordering-system/chromeExtension/production-v1.min.css">

<div class="msgBox msgBox__container bg-light-grey">

  

  <section class="topBar bg-grey">

    <a href="#" class="round arrowBox bg-white"><div class="arrow down"></div></a>

  </section>

  

  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

      <div class="user__status round bg-pink"></div>

    </div>

    <div class="user__nameContainer">

      <div class="user__detail mid-grey">Kerem Suer</div>

      <div class="user__detail light-grey">Contributor</div>

    </div>

    <button class="btn">Block</button>

  </section>



  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

Centrar Imagen - FlexBox

// NO JS

find out whether the radio button is checked, or not

<!DOCTYPE html>
<html>
<body>

Radio button:<input type="radio" id="myRadio" checked>

<p>Click the "Try it" button to find out whether the radio button is checked, or not.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myRadio").checked;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Untitled1 - Jupyter Notebook

model training and testing

Light and Dark theme React with Less and CSS variables

const LIGHT_THEME = 'light-theme';

const DARK_THEME = 'dark-theme';



const ThemeContext = React.createContext();



function ThemeWrapper({ children }) {

  const [theme, setTheme] = React.useState(LIGHT_THEME);

  

  const applyTheme = (newTheme) => {

    document.getElementById('app').className = newTheme;

    setTheme(newTheme);

  }

  

  return (

    <ThemeContext.Provider value={{ theme, applyTheme }}>

      {children}

    </ThemeContext.Provider>

  )

}

Simple React Dark Mode.

function Header() {

  const [ darkMode, setDarkMode ] = React.useState(false)

   

  React.useEffect(() => {

    const body = document.body

    const toggle = document.querySelector('.toggle-inner')

    

    // If dark mode is enabled - adds classes to update dark-mode styling.

    // Else, removes and styling is as normal.

    if( darkMode === true ) {

      body.classList.add('dark-mode')

      toggle.classList.add('toggle-active')

    } else {

      body.classList.remove('dark-mode')

      toggle.classList.remove('toggle-active')

    }

  }, [darkMode])

  

  return (

Copy/paste contacts

mobile menu close

<script>
    jQuery(document).ready(function() {

        jQuery("#dd-menu-mobile ul li a").attr("onclick", "menuClose()");
        jQuery(".dd-cta-close").attr("onclick", "menuClose()");

    });

    function menuClose() {
        var element = document.getElementById("dd-section");
        element.classList.toggle("dd-m-menu");
    }

</script>

Slick Carousel smooth scroll

$('#gallery').slick({

  slidesToShow: ,

  slidesToScroll: 1,

  autoplay: true,

  autoplaySpeed: 0,
6
  speed: 000,

  pauseOnHover: false,
8
  cssEase: 'linear'

});

filter array with rest operator

https://jsbin.com/

Browse more snippets >>