How to style CSS role
Use CSS attribute selectors: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors e.g.: div[role=main]
css
Smallest data URI image possible for a transparent image
After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as … Read more
Calc of max, or max of calc in CSS
A ‘pure’ css solution actually is possible now using media queries: .yourselector { max-width: calc(100% – 80px); } @media screen and (max-width: 500px) { .yourselector { max-width: 500px; } }
Bootstrap 4, How do I center-align a button?
In Bootstrap 4 one should use the text-center class to align inline-blocks. NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that’s exactly what .text-center applies. <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”> <div class=”container”> <div class=”row”> <div class=”col text-center”> <button class=”btn btn-default”>Centered button</button> … Read more
Make Font Awesome icons in a circle?
With Font Awesome you can easily use stacked icons like this: <span class=”fa-stack fa-2x”> <i class=”fas fa-circle-thin fa-stack-2x”></i> <i class=”fas fa-lock fa-stack-1x fa-inverse”></i> </span> refer Font Awesome Stacked Icons Update:- Fiddle for stacked icons
What is the ‘.well’ equivalent class in Bootstrap 4
Update 2018… card has replaced the well. Bootstrap 4 <div class=”card card-body bg-light”> Well </div> or, as two DIVs… <div class=”card bg-light”> <div class=”card-body”> … </div> </div> (Note: in Bootstrap 4 Alpha, these were known as card-block instead of card-body and bg-faded instead of bg-light) http://codeply.com/go/rW2d0qxx08
How do I make text bold in HTML?
use <strong> or <b> tag also, you can try with css <span style=”font-weight:bold”>text</span>
What is the difference between :first-child and :first-of-type?
A parent element can have one or more child elements: <div class=”parent”> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> Among these children, only one of them can be the first. This is matched by :first-child: <div class=”parent”> <div>Child</div> <!– :first-child –> <div>Child</div> <div>Child</div> <div>Child</div> </div> The difference between :first-child and :first-of-type is that :first-of-type will match the … Read more
textarea – disable resize on x or y?
resize: vertical; or resize: horizontal; Quick fiddle: http://jsfiddle.net/LLrh7Lte/
100vw causing horizontal overflow, but only if more than one?
As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%. .box { width: 100vw; height: 100vh; max-width:100%; /* added */ } Working Fiddle