Krishan Dev Personal Blog

 HTML: <div class = "container-fluid" >     <div class = "row" >         <h2> Bootstrap CSS Horizontal Alignment </h2>         <div class = "col-sm-3" ><h2> Col 1 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>         <div class = "col-sm-3" ><h2> Col 2 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>         <div class = "col-sm-3" ><h2> Col 3 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>     </div>     <!-- justify-content-end Class -->     <div class = "row justify-content-end" >         <h2> justify-content-end Class </h2>         <div class = "col-sm-3" ><h2> Col 1 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit.

 HTML: <div class = "container-fluid" >     <div class = "row" >         <div class = "col-md-8" >             <div class = "row" >                 <h2> Bootstrap CSS Nesting </h2>                 <div class = "col-md-6" ><h3> First Column </h3> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, saepe veniam ea adipisci at quibusdam magni quas facere, ratione iste dolorum iusto mollitia. Libero voluptatum repellat nesciunt impedit illo pariatur doloremque hic similique dolores dicta! Ratione facere officia quam id molestiae eveniet quos veritatis non, voluptatum porro ullam pariatur veniam! </div>                 <div class = "col-md-6" > <h3> Second Column </h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quas assumenda voluptas ad, expedita dolor sint totam autem ab excepturi odio labore odit at animi eius

 HTML: <div class = "container-fluid" >     <div class = "row" >         <h2> Bootstrap CSS Order Class </h2>         <div class = "col order-sm-2 col1" > Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt animi obcaecati nam nihil suscipit consequuntur numquam est, ipsam cumque sed quisquam! Incidunt illum fugit alias delectus! Sed eum iusto, aspernatur veniam corporis nisi temporibus aliquid nihil atque a aliquam necessitatibus consequuntur quidem ipsa commodi, ex ipsam eveniet eos quaerat. Tenetur corrupti dolore dolor neque consequatur placeat facere nisi id repellat sapiente quam quisquam similique quod labore magni consectetur corporis, illo tempora molestias quia animi laborum. Consequuntur sunt necessitatibus quae doloremque ab officia quasi. Consequatur, totam tenetur repudiandae dicta laborum, ea laboriosam porro, quasi asperiores ullam quaerat obcaecati fugiat dolor nihil. </div>         <

  Component.html: <div class = "container-fluid" >     <div class = "row" >         <h2> OffSet Tutorial </h2>         <div class = "col-md-5 offset-md-1" >             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet qui, officia sunt ducimus obcaecati cumque delectus repellendus velit maxime quibusdam. Placeat ex pariatur quos repellendus deserunt? Sed dolorem eligendi, deleniti esse voluptatibus dolores! Sapiente, saepe! Molestiae recusandae eveniet eos quidem veniam cum sit mollitia maxime. Pariatur optio dolor reiciendis fugit.         </div>         <div class = "col-md-3 offset-md-1" >             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos reiciendis vel tempora numquam voluptatum omnis, consequatur atque sequi tenetur, blanditiis placeat temporibus velit, repellendus ea!         </div>         <div class = "col-md-1 offset-md-1" >

 component.html: <div class = "container-fluid" >     <!-- row 1 or header -->     <div class = "row" >         <div class = "col-12" >             <h1> Website Header </h1>         </div>     </div>     <!-- Row 2 or sub-header -->     <div class = "row" >         <div class = "col-12 secondRow" >             <h2> Sub-Header </h2>         </div>     </div>     <!-- Row 3 or content part -->     <div class = "row" >         <div class = "col-9" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ab atque quas? Labore totam cumque molestias facere optio odio nam atque dolores excepturi voluptate nostrum autem eligendi hic laboriosam illo, accusamus expedita inventore possimus. Numquam consequatur aut at magnam corporis error labore odit enim ex harum quis debitis, qui, commodi, fugit quas il

 app.component.html: -  <!DOCTYPE html > <html lang = "en" > <head>   <meta charset = "UTF-8" >   <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   <title> Grid Tutorial </title> </head> <body> <div class = "container" >   <div class = "item item1" ></div>   <div class = "item" > Lorem ipsum dolor sit amet consectetur adipisicing elit. ... </div>   <div class = "item" ></div>   <div class = "item" ></div>   <div class = "item footer" ></div>     </div> </body> </html> ------------------------------------------- app.component.css: * {     margin : 0 ;     padding : 0 ; } .container { background-color : red ; height : 700px ; di