Bulma change background color


You can change background color of any element like – section, column or any other layout component using your custom class.


Bulma change background color CSS Example

You can create your custom class to change the background color simply as below-

Example:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bulma Tutorial!</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
    <style>
    .custom-bg{
		background-color:yellow;
	}
    </style>
   </head>
   <body>
          <section class="section custom-bg"> 
			  <h2>Welcome to Bulma!</h2>
	      </section>
   </body>
</html>                                                                                    
                                                                                    

Try it »

Output of above example-

Bulma change background color

Advertisements

Add Comment