UI/UX Design and Development

In this blog, you will learn how to create master page for Html/Static Sites, We can create master page using PHP. Step1: Change the Name of your file extension. index.html(all files extension)  into index.php Step2: Create header.inc.php and footer.inc.php files. Step3: Add header elements and navigation bar into  header.inc.php and   Add footer files into  footer.inc.php (Whatever you want to show in all pages(masterfile)) Step4: Remove the header and navbar, footer elements inthe index file and put the  <?php include_once 'includes/header.inc.php' ; ? > - header section <?php include_once 'includes/footer.inc.php' ; ? > - footer section Step5: Now you load the index.php file, Finally Website master page created

Search Results Webpart modern Material UI styled Tiles. you can show the sharepoint list to modern Tiles. Adding Managed property Mapping Add the search columns to managed property. <mso:ManagedPropertyMapping msdt:dt="string">&quot;quarter&quot;:&quot;RefinableString32&quot;,&quot;Employee Name&quot;:&quot;EmpNameOWSTEXT&quot;,&quot;Service Year&quot;:&quot;ServiceYearsOWSNMBR&quot;,&#39;Picture URL&#39;{Picture URL}:&#39;PublishingImage;PictureURL;PictureThumbnailURL&#39;,&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&quot;Title&quot;:&quot;Title&quot;,&quot;EventDate&quot;:&quot;EventDateOWSDATE&quot;,&quot;Category&quot;:&quot;CategoryOWSCHCS&quot;,&quot;Path&quot;:&quot;Path&quot;,'PictureHeight':'PictureHeight','PictureWidth':'PictureWidth','ImageDateCreated':'ImageDateCrea

Grid system .  Bootstrap  includes a responsive, mobile first fluid  grid system  that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Bootstrap 3: Grid Classes The Bootstrap grid system has four classes: xs  (for phones - screens less than 768px wide) sm  (for tablets - screens equal to or greater than 768px wide) md  (for small laptops - screens equal to or greater than 992px wide) lg  (for laptops and desktops - screens equal to or greater than 1200px wide) Bootstrap 4: Grid Classes The Bootstrap 4 grid system has five classes: .col-  (extra small devices - screen width less than 576px) .col-sm-  (small devices - screen width equal to or greater than 576px) .col-md-  (medium devices - screen width equal to or greater than 768px) .col-lg-  (large devices - screen width equal to or greater than 992px)