Bootstrap: CSS Drop Caps - Add a "dropcaps" class

Created on 1 Jan 2017  路  5Comments  路  Source: twbs/bootstrap

Kinda basic but should be added to bootstrap core
Demo => http://codepen.io/IamManchanda/pen/bgbraw

Here's the SCSS I used for the above example

.dropcaps:first-of-type:first-letter {
  height: 0.7em;
  margin: 0.08em 0 -0.05em 0;
  padding: 0 0.065em 0 0;
  font-size: 5em;
  line-height: 0.85em;
  float: left;
}

That tiny negative margin is for the next line (4th line in this case) to start from scratch after dropcap has finished its variable height!

css feature v4

Most helpful comment

I don't see this being a hugely request feature, and despite it's initial impressions of not much code to add, it's still something we've added to the project. Everything added dilutes the rest in some way and I'll continue to be rather particular in what we add here to keep things lean enough.

All 5 comments

Neat!

thanks @cquanu .... Yup neat like your theme

Thanks, but we'll pass on this for now. <3

What happened @mdo .... I thought this would have been nice feature to add ?
Simple dropcaps .... Not much code to add ?

I don't see this being a hugely request feature, and despite it's initial impressions of not much code to add, it's still something we've added to the project. Everything added dilutes the rest in some way and I'll continue to be rather particular in what we add here to keep things lean enough.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tiendq picture tiendq  路  3Comments

IamManchanda picture IamManchanda  路  3Comments

ghost picture ghost  路  3Comments

ziyi2 picture ziyi2  路  3Comments

cvrebert picture cvrebert  路  3Comments