What is the difference between container and container-fluid ?

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

.container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); 

Copy

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

.container-fluid expands to fill the available width.

Copy

<div class="container-fluid">
  ...
</div>

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Can I style an placeholder text color on firefox ?

Add opacity: 1 to the Firefox placeholders. 

HTML

<input id="myinput" type="text" placeholder="my placeholder" maxlength="30" name="myplaceholder">


CSS:-

input#myinput::-webkit-input-placeholder {
color:#FFF; background-color:#CCC;
}
input#myinput::-moz-placeholder {
color:#FFF; background-color:#CCC;
    opacity: 1;
}
input#myinput:-moz-placeholder {
color:#FFF; background-color:#CCC;
    opacity: 1;
}
input#myinput::-ms-input-placeholder {
color:#FFF; background-color:#CCC;
} /* IE10+ */



RESULT:-





Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Can I style an html radio button to look like a checkbox ?

it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the
CSS3 appearance property:

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

The result is radio elements that look like checkboxes.

Demo

One Other Demo





Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

How to Show/Hide two div on single button click with javascript

solution :-


$('#id1').on('click', function(){
        var ele = document.getElementById("div1");
        var ele1 = document.getElementById("div2");
        ele1.style.display = "none";
        if(ele.style.display == "block") {
                ele.style.display = "none"; 
ele1.style.display = "block";              
          }
        else {
            ele.style.display = "block";
ele1.style.display = "none";            
        }
    });

how to set a active class on first div in wordpress

<?php $firstMarked = false; ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="item <?php echo !$firstMarked ? "active":"";?>">
  <?php the_post_thumbnail('full');?>
  <div class="container">
    <div class="caption">
      <h1>
        <?php the_title(); ?>
      </h1>
      <p>
        <?php the_excerpt(); ?>
      </p>
    </div>
  </div>
</div>
<?php $firstMarked = true;?>
<?php endwhile; ?>

How to Build WordPress Navigation Using wp_nav_menu()

<?php

$defaults = array(
 'theme_location'  => '',
 'menu'            => '',
 'container'       => 'div',
 'container_class' => '',
 'container_id'    => '',
 'menu_class'      => 'menu',
 'menu_id'         => '',
 'echo'            => true,
 'fallback_cb'     => 'wp_page_menu',
 'before'          => '',
 'after'           => '',
 'link_before'     => '',
 'link_after'      => '',
 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'depth'           => 0,
 'walker'          => ''
);
 
wp_nav_menu( $defaults );

?>

wp_nav_menu shortcode

wp_nav_menu shortcode

To install the shortcode just place this code inside functions.php file of your theme.

// Function that will return our Wordpress menu
function list_menu($atts, $content = null) {
 extract(shortcode_atts(array(  
  'menu'            => '', 
  'container'       => 'div', 
  'container_class' => '', 
  'container_id'    => '', 
  'menu_class'      => 'menu', 
  'menu_id'         => '',
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'depth'           => 0,
  'walker'          => '',
  'theme_location'  => ''), 
  $atts));
 
 
 return wp_nav_menu( array( 
  'menu'            => $menu, 
  'container'       => $container, 
  'container_class' => $container_class, 
  'container_id'    => $container_id, 
  'menu_class'      => $menu_class, 
  'menu_id'         => $menu_id,
  'echo'            => false,
  'fallback_cb'     => $fallback_cb,
  'before'          => $before,
  'after'           => $after,
  'link_before'     => $link_before,
  'link_after'      => $link_after,
  'depth'           => $depth,
  'walker'          => $walker,
  'theme_location'  => $theme_location));
}
//Create the shortcode
add_shortcode("listmenu", "list_menu");