#5 even columns in Bootstrap 3
Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.
Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.
<div class="row fivecolumns">
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Bootstrap Sidebar</title> | |
| <!-- Bootstrap --> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Animated List Items in Bootstrap</title> | |
| <!-- Bootstrap --> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
| p.4columns { | |
| -webkit-column-count: 4; /* Chrome, Safari, Opera */ | |
| -moz-column-count: 4; /* Firefox */ | |
| column-count: 4; | |
| -webkit-column-gap: 20px; /* Chrome, Safari, Opera */ | |
| -moz-column-gap: 20px; /* Firefox */ | |
| column-gap: 20px; | |
| column-rule-color: #ccc; /* Optional */ | |
| column-rule-style:solid; /* Optional */ | |
| column-rule-width: 1px; /* Optional */ |
| # REDIRECT UNAUTHORIZED IP ADDRESSES THAT TRY TO ACCESS WP-ADMIN | |
| # | |
| <IfModule mod_rewrite.c> | |
| RewriteEngine on | |
| RewriteBase / | |
| # ======= IF YOU WANT INTO THE WORDPRESS ADMIN AREA... ======= | |
| RewriteCond %{REQUEST_URI} ^(.*)?wp-login\.php(.*)$ [OR] | |
| RewriteCond %{REQUEST_URI} ^(.*)?wp-admin$ [OR] | |
| RewriteCond %{REQUEST_URI} ^/wp-admin.* |
| <!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 --> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22> | |
| <text y=%22.9em%22 font-size=%2290%22>😎</text> | |
| </svg>"> | |
| <!--ANIMATED ATTEMPT--> | |
| <!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 --> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><style>svg{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}svg{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} |
npm install broken-link-checker -gblc https://www.website.com/blog -ro --exclude-externalblc http://localhost:80/blog -ro --exclude-external > output.txt
| // Fetch external data for use with 11ty (https://www.11ty.dev) | |
| const fetch = require("node-fetch"); | |
| module.exports = async function() { | |
| console.log( "Fetching titles…" ); | |
| // Sheety API - See: https://sheety.co/ | |
| const response = await fetch("https://v2-api.sheety.co/fc583ad9266228c03ecc1ee9ace31835/starWarsChronologicalOrder/sheet1") | |
| return response.json(); | |
| }; |
| # cwebp Docs: https://developers.google.com/speed/webp/docs/using | |
| find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \; && | |
| find ./ -type f -name '*.jpg' -exec sh -c 'cwebp -q 75 $1 -o "${1%.jpg}.webp"' _ {} \; |
| // WP FEATURED IMAGE URLS in JSON API | |
| // See: https://wordpress.stackexchange.com/a/249769/105228 | |
| // | |
| add_action( 'rest_api_init', 'add_thumbnail_to_JSON' ); | |
| function add_thumbnail_to_JSON() { | |
| //Add featured image | |
| register_rest_field( | |
| 'post', // Where to add the field (Here, blog posts. Could be an array) | |
| 'featured_image_src', // Name of new field (You can call this anything) | |
| array( |