November 6, 2017   Php Frequently Asked Questions

Php Replace Img tag by amp-img

Php Replace Img tag by amp-img– We can use regular expression and str_replace to replace image tag by amp image tag.

Php Replace Img tag by amp-img | AMP image tag Example

You can use the below example to replace image tag by amp-img tag-

Php Replace Img tag by amp-img | Example:

. Learn more";
$result = preg_replace('/(]+>(?:<\/img>)?)/i', '$1', $content);
echo str_replace('

The above example will take care about height width and alt tag of amp-img so you do’nt need to worry about anything.

Example 2 Using preg_replace

echo htmlentities(preg_replace(
    '//', 
    '', 
    '
hi bro '
));
Read More
November 6, 2017   Bulma Blog

Bulma Registration Page

Bulma Registration Page– We can use Bulma Css form controls to create Registration Page. It is very simple to create Registration page in Bulma if you basic idea about Bulma Css Form. Here in this article we are going to create simple Registration template which you can use anywhere. You can also use our online editor to edit and run the code online.

Bulma Registration Page | Form | Template | Download Example

Here is simple Registration form which contains form fields for Registration.

Bulma Login Page Template Example:

   
      
      
      
      
      
   
   
      

         

            

               

                  
                  

                     
                  

               

               

                  
                  

                     
                     
                     
                     
                     
                     
                     
                  

                  
This username is available

               

               

                  
                  

                     
                     
                     
                     
                     
                     
                     
                  

                  
This email is invalid

Try it »

We have used column is-4 and is-offset-4 to align center this login form. If you don’t want to align center remove class is-offset-4.

If you run the above example it will produce output something like this-

Bulma Registration Page Template Download
Read More
November 6, 2017   Bulma Blog

Bulma Login Page

Bulma Login Page– We can use Bulma Css form controls to create Login Page. It is pretty simple and quick to create login page in Bulma. Here in this article we are going to create simple login template which you can use anywhere. You can also use our online editor to edit and run the code online.

Bulma Login Page | Form | Template | Download Example

Here is simple login form which have two input fields – email and password.

Bulma Login Page Template Example:

Try it »

We have used column is-4 and is-offset-4 to align center this login form. If you don’t want to align center remove class is-offset-4.

If you run the above example it will produce output something like this-

Bulma Login Page Template Example
Read More
November 5, 2017   Bulma Tutorial

Bulma Layout

Bulma Layout Bulma Css provides various classes that can be used to create layout such as – container, media object, section and footer etc. Here in this tutorial,we are going to explain each topics with example and demo.

Bulma Layout | Container | Section

Following topics are covered in this tutorial-

  1. Container
  2. Level
  3. Media Object
  4. Hero
  5. Section
  6. Footer
  7. Tiles

Container

.container class is used to create container. Container class can be used anywhere but it mostly used direct child of navbar, hero, section and footer.

Bulma Container Example:


  

    This container is Demo Container on desktop.

Try it »

If you run the above example it will produce the output something like this-

Bulma Layout Container Example

  • On Desktop– On Desktop maximum width is 960px and it will be horizontally centered.
  • On Widescreen– On widescreen maximum width is 1152px.
  • On Full Hd– On Full Hd maximum width will be 1344px.

Fluid Container

If you want to create a container of full width with 24px margin on left and right side add class is-fluid to container.

Fluid Container Example:


	

			    This container is fluid: it will have a 24px gap on either side, on any viewport size.

Try it »

If you run the above exmaple it will produce output something like this-

Bulma Layout Fluid Container

Breakpoint Containers

Using modifiers – .is-widescreen and .is-fullhd we can create fullwidth container until the specific breakpoints.

| Example:


   

	This container is fullwidth until the $widescreen breakpoint.

Try it »

Level

Level is basically container which can contain any other element.

To create level you need to create a wrapper element with class – .level then add container with class .level-left and .level-right and then add level item by adding class .level-item.

Bulma Level Container Example:

Try it »

If you run the above example it will produce output something like this-

Bulma Level container example

Centered Level

If you want to make the level text centered add the class- has-text-centered to the level item container.

Bulma Level text center align Example:

Try it »

If you run the above example it will produce output something like this-

Bulma Center Align Level

Media Object

Bulma provides classes to create media object. Media object is basically ui element that is used for repeatable content.

Bulma Media Object Example:

 

		  

		    

		      
		    

		  

		  

		    

		      

		        John Dee @johndee 35m
		        

              This is dummy Text....

Try it »

Hero

Bulma provides classes to create Hero banners which can be used to showcase something. Class hero and hero-body is used to create hero banner.

Hero Banner Example:


  

    

      

        Primary title
      

      

        Primary subtitle

Try it »

On the same way you can change the background color of Hero banner using modifier classes.

If you run the above example it will produce output something like this-

Bulma Hero Banner - Form Example

Colored Hero Banner

You can watch this video for demo-

Sections

Section is basically a container that is used to divide page into parts. Sections are directly used as child of body.

  

    

      
My Section

      

       This is simple container.

Footer

Bulma provides footer class to create responsive footer. Footer can contain lists, columns, icons and buttons etc. 


  

    

      
© Copyright 2017. All Rights Reserved.
Read More
November 5, 2017   Bulma Tutorial

Bulma Columns

Bulma Columns– Bulma Css provides simple classes to create responsive columns. It is very easy to create responsive columns in Bulma. Here in this article we are going to explain how you can column container and column class to create responsive columns. You can also use our online editor to edit and run the code online.

Bulma Columns

This Article contains the following topics-

  1. Basics
  2. Sizes
  3. Responsiveness
  4. Nesting
  5. Gap
  6. Options

1. Basics

To create column layout you need to create column container and then add as many container as you want. Here is simple example of column layout.

Bulma Columns Example:


  

    Column 1
  

  

    Column 2
  

  

    Column 3
  

  

    Column 4

Try it »

If you run the above example it will produce output something like this-

Bulma Columns Css Class Example

You can as many columns you want there is no limitation on it, Bulma will automatically handle the columns on all devices.

2. Sizes

There are various classes available that we can use to change the size of column.

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

The columns will occupy the space as class name example -is-half ie. half width of the container. Other columns will automatically manage and adjust in remaining space.

Let us create simple example to understand the above classes.

Change Column Size Classes Example:

  

 
is-four-fifths


Auto


Auto

					
					



is-three-quarters


Auto


Auto



					



is-two-thirds


Auto


Auto

Try it »

If you run the above example it will produce output something like this- Bulma Column Example

12 Columns Grid System

Bulma Also provides classes to create 12 column grid system. Following classes are available to create grid.

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

Now let us create simple example to understand the grid system.

12 Columns Grid Example:

 

					  
is-2

					  
Auto

					

					

					  
is-3

					  
Auto

					
	
					

					  
is-4

					  
Auto

					

					

					  
is-5

					  
Auto

					

					

					  
is-6

					  
Auto

					

					

					  
is-7

					  
Auto

					

					

					  
is-8

					  
Auto

					

					

					  
is-9

					  
Auto

					

					

					  
is-10

					  
Auto

					

					

					  
is-11

					  
Auto

Try it »

If you run the above example it will produce output something like this-

Bulma Grid System Example

Offset

You can use offset classes to add offset to the columns.

  • is-offset-x – Where x is number for example – is-offset-2, is-offset-3, is-offset-8, is-offset-11 etc.
  • is-offset-one-fifth
  • is-offset-one-quarter
  • is-offset-one-quarter

Column Offset Example:

Narrow Columns

If want to create a column to occupy the space that it really needs, use is-narrow modifier class.

Narrow Column Example:


  

    

      
Narrow column

      
 250px wide column.

    

  

  

    

      
Flexible column

      
This will cover the remaining space.

Following Narrow Modifiers are available-

  • is-narrow-mobile
  • is-narrow-tablet
  • is-narrow-desktop

Responsiveness

There are some classes that can be used to handle the responsiveness of the application.

Mobile Columns

By default columns on mobile devices are stacked on each other. To work columns on mobile add the class is-mobile.

Mobile Columns Example:


  
1

  
2

  
3

  
4

Now the above columns will work on mobile devices also.

Desktop Columns

If you want columns to work on desktop upwards use is-desktop class.

Desktop Columns Example:


  
1

  
2

  
3

  
4

3. Nesting Columns

We can create nested columns by adding column container and columns inside another column.

Nested Columns Example:


        
First column

        

          

            
1st nested column

          

          

            
2nd nested column

Gap

Bulma provides classes to manage the gaps between the columns.

Default Gap

By default columns have gap with 0.75rem on each side hence gap between two columns is 1.5rem.

Gapless Columns

We can remove the column gaps using modifier class is-gapless.

Remove Space Between Columns Example:


  

    No gap
  

  

    No gap

is-multiline is used to combine the columns.


  

    No gap
  

  

    No gap

Variable Gap

If you want to add variable gaps, use the following classes-

  1. is-0
  2. is-1
  3. is-2
  4. is-3
  5. is-4
  6. is-5
  7. is-6
  8. is-7
  9. is-8

Example


  

    No gap
  

  

    No gap

Note: Please Add is-variavle class to add the variable gap.

Column Options

Multiline

You can use is-multiline modifier to add more column elements that will fit in single row.

Centering Column

You can use the is-centered class to center align the columns in Bulma. 


  

    

      is-half

      is-narrow
Read More
November 2, 2017   Bulma Tutorial

Bulma Modifiers

Bulma Modifiers– Bulma Css provides modifier classes which can be used to add the alternative styles. Using Modifier classes you can easily modify the default styles. Modifier classes starts with is- or has-. Here in this article, we are going to explain how we can use modifier classes in Bulma.

Bulma Modifiers | Helpers | Css Classes Syntax & Example

Let us understand how modifier classes works step by step.

Topics

  1. Syntax
  2. Helpers
  3. Responsive Helpers
  4. Typography Helpers

Syntax

Modifier classes starts with is- or has- for example- is-primary, is-link. Suppose we want to change the default button style we can use these modifier classes. Now let us go through some important modifier classes.

Change Button Color

There are following classes that can be used to change the button color in Bulma.

  1. is-primary
  2. is-link
  3. is-info
  4. is-success
  5. is-warning
  6. is-danger

Using the above modifier classes you can create the following buttons-

Bulma Add Button Color Example:


  Button Primary


  Button Link


  Button Info


  Button Success


  Button Warning


  Button Danger

Try it »

If you run the above example it will produce output something like this-

Bulma Modifiers

Change Button Size

You can create small, medium or large buttons in Bulma. You can use the following classes to change size-

  1. is-small
  2. is-medium
  3. is-large

Bulma Change Button Size Example:


 Button Small


Button 


Button Medium


Button Large

Try it »

If you run the above example it will produce output something like this-

Button Modifiers - Change Button Size Example

Change Button Style/State

You can create outlined, loading, disabled buttons using the following class-

  1. is-outlined
  2. is-loading
  3. is-disabled

Button Style & State Example:


Button


Button


Button

Try it »

Output of the above example will be-

Bulma Loading Button

Helpers

Following responsive classes are available which can be used easily anywhere-

  1. is-clearfix– Fixes an element’s floating children
  2. is-pulled-left– Moves an element to the left
  3. is-pulled-right– Moves an element to the right
  4. is-marginless– Removes any margin
  5. is-paddingless– Removes any padding
  6. is-overlay– Completely covers the first positioned parent
  7. is-clipped– Adds overflow hidden
  8. is-radiusless– Removes any radius
  9. is-shadowless– Removes any shadow
  10. is-unselectable– Prevents the text from being selectable
  11. is-invisible-Adds visibility hidden

Responsive Helpers

You can use the responsive helper to show/hide the content based on viewport of device.

Show

You can use following display classes-

  1. block
  2. flex
  3. inline
  4. inline-block
  5. inline-flex

Hide Classes

You can use following classes to hide on specific devices-

  1. is-hidden-mobile– Hidden on Mobile devices.
  2. is-hidden-tablet-only– Hidden only on Tablet.
  3. is-hidden-desktop-only-Hidden only on desktop.
  4. is-hidden-widescreen-only– Hidden on wide screen between 1216px and 1407px.

Typography Helpers

Read More
November 2, 2017   Bulma Tutorial

Bulma Installation

Bulma Installation Steps– It is very simple to install Bulma Css. There are many ways to install Bulma css. Here in this tutorial, we are going to explain the installation steps. You can also use starter template to start quickly.

Bulma Installation Steps

You can get started with Bulma Css using the one of following method-

1. Using Npm

Using Npm you can install Bulma Package simply as below-

Install Bulma Npm command

npm install bulma

2. Using Hosted CDN

You can also use hosted CDN to include Bulma css. Add the following url in head to include Bulma css.

Bulma CSS CDN Url:

3. Install Locally

If you want to install Bulma locally just download files from https://github.com/jgthms/bulma/tree/master/css and include in head.

If you want to use the icons with Bulma please include font-awesome.

Quick Start

You can start with Bulma using the starter template-

Bulma Quick Start Template:

  
    
    
    
    
    
  
  
  

    

      

        Welcome to Bulma!
      

      

        My first website with Bulma!

Try it »

If you run the above example it will produce output something like this-

Bulma Installation Steps - Download

Read More
October 27, 2017   Bulma Tutorial

Bulma Tutorial

Bulma Tutorial– Bulma is Open source Modern Css framework which is lightweight, responsive & moduler. Bulma is 100% responsive and designed for mobile first, it is based on Flexbox.

Bulma Tutorial Step By Step

Here in this tutorial, we are going to cover each topic of Bulma framework with various examples & demo.

Bulma Features

  • Responsive– This framework is 100% responsive which works across all devices.
  • Mobile First– This is designed keeping mobile first.
  • Moduler– This is built on modular approach so just import the part that you want to use for example – if you want to use only Bulma buttons just import buttons as- 
    @import "bulma/sass/elements/button.sass"
  • Modern– This is modern framework and built with Flexbox.
  • Free And Open Source– This framework is fully opensource and free to use.

What You Should Know?

Before starting you should have basic knowledge of HTML and CSS.

Read More
October 26, 2017   Bootstrap Questions And Answers

Bootstrap grid without padding

Bootstrap grid without padding- We can create our own custom class to override the default behavior such as remove padding, margin etc. Here in this article we are going to explain how you can remove padding from grid in Bootstrap.

Bootstrap grid without padding | Remove Padding Example

You can create your custom class and add the following css to remove padding from column-

Bootstrap Grid Remove Padding Css| Example:







   

            Col 1
   

    

            Col 2

So you can remove padding from any grid column in Bootstrap.

Read More
« Older posts
Newer posts »