Newbe Dev Stack

Example 1: css change font awesome icon color <a href= "/users/edit" ><i class= "fa fa-cog" style= "color:black !important;" ></i> Edit profile</a> Example 2: css change font awesome icon color .fa { color : red !important ; } Example 3: css change font awesome icon color .<fa-icon-class > { color : red !important ; } Example 4: how to change color of font awesome icons <a href= "/users/edit" ><i class= "icon-cog" ></i> Edit profile</a>

Example 1: css transition all -webkit-transition : all .3 s ease-in-out ; -moz-transition : all .3 s ease-in-out ; -o-transition : all .3 s ease-in-out ; -ms-transition : all .3 s ease-in-out ; transition : all .3 s ease-in-out ; Example 2: css background color transition /* Answer to: "css background color transition" */ /* Transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+. The following should produce a fade effect for you on the browsers mentioned above: */ a { background-color : #FF0 ; } a :hover { background-color : #AD310B ; -webkit-transition : background-color 1000 ms linear ; -ms-transition : background-color 1000 ms linear ; transition : background-color 1000 ms linear ; }

Example: color in html <!-- Color in HTML by inline-css --> <p style= "color: red; background-color: blue;" > This text is red and the background is blue </p>

Example 1: disable textarea resize textarea { /* for all text* area elements */ resize : none ; } #foo { /* for particular id */ resize : none ; } Example 2: make textarea not resizable You can either apply this as an inline style property like so: <textarea style="resize: none;" > </textarea > or in between <style > ...</style > element tags like so: textarea { resize : none ; }

Example 1: bootstrap Badges Contextual variations Add any of the below mentioned modifier classes to change the appearance of a badge. <span class= "badge badge-primary" >Primary</span> <span class= "badge badge-secondary" >Secondary</span> <span class= "badge badge-success" >Success</span> <span class= "badge badge-danger" >Danger</span> <span class= "badge badge-warning" >Warning</span> <span class= "badge badge-info" >Info</span> <span class= "badge badge-light" >Light</span> <span class= "badge badge-dark" >Dark</span> Example 2: bootstrap badges Links Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states. <a href= "#" class= "badge badge-primary" >Primary</a> <a href= "#" class= ...

Example 1: change border highlight color on an input text element input :focus { outline : none !important ; border-color : #719ECE ; box-shadow : 0 0 10 px #719ECE ; } textarea :focus { outline : none !important ; border-color : #719ECE ; box-shadow : 0 0 10 px #719ECE ; } Example 2: change border highlight color on an input text element .input :focus { outline : none !important ; border : 1 px solid red ; box-shadow : 0 0 10 px #719ECE ; }

Example 1: how to make fonts respnsive h1 { font-size : clamp ( 16 px , 5 vw , 34 px ) ; } Example 2: responsive text css /* Uses vh and vm with calc */ @media screen and ( min-width : 25 em ) { html { font-size : calc ( 16 px + ( 24 - 16 ) * ( 100 vw - 400 px ) / ( 800 - 400 ) ) ; } } /* Safari <8 and IE <11 */ @media screen and ( min-width : 25 em ) { html { font-size : calc ( 16 px + ( 24 - 16 ) * ( 100 vw - 400 px ) / ( 800 - 400 ) ) ; } } @media screen and ( min-width : 50 em ) { html { font-size : calc ( 16 px + ( 24 - 16 ) * ( 100 vw - 400 px ) / ( 800 - 400 ) ) ; } } Example 3: how to make font responsive html { font-size : calc ( 1 em + 1 vw ) ; } Example 4: bootstrap text size <p class= "h1" >h1. Bootstrap heading</p> <p class= "h2" >h2. Bootstrap heading</p> <p class= "h3" >h3. Bootstrap heading</p> ...

Example 1: circlular waiting icon bootstrap <div class= "spinner-border" role= "status" > <span class= "sr-only" >Loading...</span> </div> Example 2: bootstrap loader <div class= "spinner-border text-primary" role= "status" > <span class= "sr-only" >Loading...</span> </div> <div class= "spinner-border text-secondary" role= "status" > <span class= "sr-only" >Loading...</span> </div> <div class= "spinner-border text-success" role= "status" > <span class= "sr-only" >Loading...</span> </div> <div class= "spinner-border text-danger" role= "status" > <span class= "sr-only" >Loading...</span> </div> <div class= "spinner-border text-warning" role= "status" > <span class= ...

Example 1: css box shadow #example1 { box-shadow : 10 px 10 px 8 px #888888 ; } Example 2: box shadow css #Box-shadow-example { Box-shadow : 0 10 px 20 px rgba ( 0 , 0 , 0 , 0.19 ) , 0 6 px 6 px rgba ( 0 , 0 , 0 , 0.23 ) ; } <!-- offset-x , offset-y , ( blur-radius and/or spread-radius=optional ) and color-->

Example 1: bootstrap grid class col-12 col-sm-4 col-md-3 col-lg-12 col-xl-12 Example 2: bootstrap change column width .col-sm-3half , .col-sm-8half { position : relative ; min-height : 1 px ; padding-right : 15 px ; padding-left : 15 px ; } @media ( min-width : 768 px ) { .col-sm-3half , .col-sm-8half { float : left ; } .col-sm-3half { width : 29.16666667 % ; } .col-sm-8half { width : 70.83333333 % ; } }

Example 1: bootstrap table dense <!-- BOOTSTRAP V3 --> <table class= "table table-condensed" > ... </table> <!-- BOOTSTRAP v4 --> <table class= "table table-sm" > ... </table> Example 2: bootstrap 3 table Bootstrap Basic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table ------------------------------------------------------------ Striped Rows The .table-striped class adds zebra-stripes to a table Bordered Table The .table-bordered class adds borders on all sides of the table and cells ------------------------------------------------------------ Hover Rows The .table-hover class adds a hover effect ( grey background color ) on table rows ------------------------------------------------------------ Condensed Table The .table-condensed class makes a table more compact by cutting cell padding in half ------------------------------------------...

Example 1: gradient image css #show_bg_2 { background-image : /*two color gradient over an image*/ linear-gradient ( to bottom , rgba ( 245 , 246 , 252 , 0.52 ) , rgba ( 117 , 19 , 93 , 0.73 ) ) , url ( 'images/background.jpg' ) ; width : 80 % ; height : 400 px ; background-size : cover ; } Example 2: css linear gradient #grad { background-image : linear-gradient ( to right , #f1b1b1 , #82e6e8 ) ; } Example 3: css horizontal gradient background color .foo { background-image : linear-gradient ( red , blue ) ; } Example 4: gradient css background /*From bottom to top*/ background : rgb ( 166 , 166 , 166 ) ; background : linear-gradient ( 0 deg , rgba ( 166 , 166 , 166 , 1 ) 0 % , rgba ( 255 , 255 , 255 , 1 ) 29 % ) ; Example 5: css gradient Here a codePen with cool gradient animations : https : //codepen.io/DevLorenzo/pen/ExgpvJM

Example 1: col-md bootstrap 4 <div class= "row" > <div class= "col-xs-12 col-md-8" >.col-xs-12 col-md-8</div> <div class= "col-xs-6 col-md-4" >.col-xs-6 .col-md-4</div> </div> <div class= "row" > <div class= "col-xs-6 col-md-4" >.col-xs-6 .col-md-4</div> <div class= "col-xs-6 col-md-4" >.col-xs-6 .col-md-4</div> <div class= "col-xs-6 col-md-4" >.col-xs-6 .col-md-4</div> </div> <div class= "row" > <div class= "col-xs-6" >.col-xs-6</div> <div class= "col-xs-6" >.col-xs-6</div> </div> Example 2: bootstrap 3 offset col-sm-offset-2 Example 3: .col-6 bootstrap .col-6 { flex : 0 0 50 % ; max-width : 50 % ; } Example 4: col-md-6 bootstrap <div class= "col-lg-2 col-md-4 col-sm-3 " > Your Stuffs </div> /* col-lg for l...

Example 1: bootstrap grid <div class= "container" > <div class= "row" > <div class= "col-sm" > One of three columns </div> <div class= "col-sm" > One of three columns </div> <div class= "col-sm" > One of three columns </div> </div> </div> Example 2: bootstrap Grid system The above example creates three equal-width columns on small , medium , large , and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container. Breaking it down , here’s how it works : Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width : 100 % across all viewport and device sizes. Rows are wrappers for columns. Each column has horizontal padding ( called a gutter ) for controlling the spa...

Example 1: centralizar div no meio da tela .center-box { display : flex ; align-items : center ; justify-content : center ; } Example 2: posicionar div centro da tela .flex-box { display : flex ; align-items : center ; justify-content : center ; }

Example 1: how to add carousel in javascript <!DOCTYPE html > <html > <head > <meta name="viewport" content="width=device-width , initial-scale=1" > <style > * { box-sizing : border-box } body { font-family : Verdana , sans-serif ; margin : 0 } .mySlides { display : none } img { vertical-align : middle ; } /* Slideshow container */ .slideshow-container { max-width : 1000 px ; position : relative ; margin : auto ; } /* Next & previous buttons */ .prev , .next { cursor : pointer ; position : absolute ; top : 50 % ; width : auto ; padding : 16 px ; margin-top : -22 px ; color : white ; font-weight : bold ; font-size : 18 px ; transition : 0.6 s ease ; border-radius : 0 3 px 3 px 0 ; user-select : none ; } /* Position the "next button" to the right */ .next { right : 0 ; border-radius : 3 px 0 0 3 px ; } /* On ho...

Example 1: custom scrollbar body ::-webkit-scrollbar { width : 12 px ; /* width of the entire scrollbar */ } body ::-webkit-scrollbar-track { background : orange ; /* color of the tracking area */ } body ::-webkit-scrollbar-thumb { background-color : blue ; /* color of the scroll thumb */ border-radius : 20 px ; /* roundness of the scroll thumb */ border : 3 px solid orange ; /* creates padding around scroll thumb */ } Example 2: bootstrap overflow hidden <div class= "overflow-auto" >...</div> <div class= "overflow-hidden" >...</div> Example 3: make a container scrollable bootstrap .anyClass { height : 150 px ; overflow-y : scroll ; } Example 4: custom scrollbar ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-we...

Example 1: add css to javafx fxml <?xml version= "1.0" encoding= "UTF-8" ?> <?import java.lang.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.layout.AnchorPane?> <AnchorPane xmlns= "http://javafx.com/javafx/8" xmlns : fx= "http://javafx.com/fxml/1" fx : controller= "application.view.RootLayoutController" > <children> <Pane layoutX= "0.0" layoutY= "0.0" prefHeight= "200.0" prefWidth= "200.0" > <children> <Button fx : id= "sunButton" layoutX= "74.0" layoutY= "88.0" mnemonicParsing= "false" onAction= "#handleSunButtonClick" styleClass= "sun-button" stylesheets= "@../css/toolbar.css" text= "Button" /> </children> </Pane> </children> ...

Example 1: bootstrap 4 footer <!-- Footer --> <footer class= "page-footer font-small blue pt-4" > <!-- Footer Links --> <div class= "container-fluid text-center text-md-left" > <!-- Grid row --> <div class= "row" > <!-- Grid column --> <div class= "col-md-6 mt-md-0 mt-3" > <!-- Content --> <h5 class= "text-uppercase" >Footer Content</h5> <p>Here you can use rows and columns to organize your footer content.</p> </div> <!-- Grid column --> <hr class= "clearfix w-100 d-md-none pb-3" > <!-- Grid column --> <div class= "col-md-3 mb-md-0 mb-3" > <!-- Links --> <h5 class= "text-uppercase" >Links</h5> <ul class= "list-unstyled" > <li> ...

Example 1: table bootstrap with scrool <div style= "height: 600px;overflow: scroll;" > <!-- change height to increase the number of visible row --> <table></table> </div> Example 2: how to set the scroll in bootstrap4 table body table { display : flex ; flex-flow : column ; width : 100 % ; } thead { flex : 0 0 auto ; } tbody { flex : 1 1 auto ; display : block ; overflow-y : auto ; overflow-x : hidden ; } tr { width : 100 % ; display : table ; table-layout : fixed ; }