Making button go full-width?
Bootstrap v3 & v4 Use btn-block class on your button/element Bootstrap v2 Use input-block-level class on your button/element
css
How to create a radial menu in CSS?
Almost 3 years later, I finally made the time to revisit this and post an improved version. You can still view the original answer at the end for reference. While SVG may be the better choice, especially today, my goal with this was to keep it just HTML and CSS, no JS, no SVG, no … Read more
Gradient borders
The border-image property can accomplish this. You’ll need to specify border-style and border-width too. border-image: linear-gradient(#f6b73c, #4d9f0c) 30; border-width: 4px; border-style: solid; Read more on MDN.
Bootstrap: align input with button
Twitter Bootstrap 4 In Twitter Bootstrap 4, inputs and buttons can be aligned using the input-group-prepend and input-group-append classes (see https://getbootstrap.com/docs/4.0/components/input-group/#button-addons) Group button on the left side (prepend) <div class=”input-group mb-3″> <div class=”input-group-prepend”> <button class=”btn btn-outline-secondary” type=”button”>Button</button> </div> <input type=”text” class=”form-control”> </div> Group button on the right side (append) <div class=”input-group mb-3″> <input type=”text” class=”form-control”> … Read more
How to override !important?
Overriding the !important modifier Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector) add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins). Some examples with … Read more
Make the first character Uppercase in CSS
There’s a property for that: a.m_title { text-transform: capitalize; } If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn’t really matter). Note that in order for :first-letter to work your a elements need … Read more
Use Font Awesome Icons in CSS
You can’t use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up. Be sure to set position:relative on your actual text wrapper for the positioning to work. .mytextwithicon { position:relative; … Read more
Can I change the height of an image in CSS :before/:after pseudo-elements?
Adjusting the background-size is permitted. You still need to specify width and height of the block, however. .pdflink:after { background-image: url(‘/images/pdf.png’); background-size: 10px 20px; display: inline-block; width: 10px; height: 20px; content:””; } See the full Compatibility Table at the MDN.
How do I center an SVG in a div?
SVG is inline by default. Add display: block to it and then margin: auto will work as expected.
How to get div height to auto-adjust to background size?
There is a very nice and cool way to make a background image work like an img element so it adjust its height automatically. You need to know the image width and height ratio. Set the height of the container to 0 and set the padding-top as percentage based upon the image ratio. It will … Read more