Bootstrap

Bootstrap, very cool, a popular front-end framework for building responsive and visually appealing websites.

d-inline is a utility class that sets the display property of an element to inline.

• Margin and Padding:

  • m-1, m-2, ... m-5: Margin classes for spacing (1 to 5).
  • p-1, p-2, ... p-5: Padding classes for spacing (1 to 5).
  • mx-3: Horizontal margin.
  • px-3: Horizontal padding.

• Text Alignment:

  • text-center: Center-align text.
  • text-right: Right-align text.

• Background and Color:

  • bg-primary, bg-secondary, ...: Background color classes.
  • text-primary, text-secondary, ...: Text color classes.

• Buttons:

• btn, btn-primary, ...: Bootstrap button classes.
• btn-outline-primary: Outline button with primary color.
• 
  

Bootstrap, Here is the Documentation site for it: https://getbootstrap.com/docs/5.0/utilities/api/

WordPress - Useful Links

Very good WordPress tutorials: https://www.wpbeginner.com/

Display posts plugin and tutorials:

https://displayposts.com/tutorials/

https://wordpress.org/plugins/display-post-types/

WordPress - PHP

Making new  menu and display location:

1. Code Snippets » Add Snippet 

<?php

    function wpb_top_right_menu() 

{

        register_nav_menu('top-right-menu',__( 'Top Right Menu' ));

}

add_action( 'init', 'wpb_top_right_menu' );?>

2. Appearance » Theme File Editor » Header(typically)

wp_nav_menu( array( 'theme_location'=>'top-right-menu', 'container_class'=>'top-right-class' ) );

WordPress - CSS

I am helping alumnus to build a WordPress website, quite interesting.

Additional CSS: good way to custom the style.

Remove the page title:

.bread_crumb

{ display: none; }

For custom top right menu:

div.top-right-class ul {

float:right;

    margin:20px 0px 20px 0px;

    list-style-type: none;

    list-style: none;

    list-style-image: none;

    text-align:right;

    display:inline-block;

}

div.top-right-class li {

    padding: 0px 20px 0px 0px;

    display: inline-block;

}  

div.top-right-class a { color:blue; }

Remove 1st letter drop cap:

.entry-content > p:first-of-type:first-letter{

font-size: 100%;

          line-height: 1; 

margin-right:-10px;

Display posts style:

.display-posts-listing .listing-item {    clear: both;  }

.display-posts-listing img {

    float: left;

    margin: 0 10px 10px 0;

}