Posts

Showing posts from October, 2022

Bootstrap CSS Horizontal Alignment Example

-
Image
 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-s...
Post a Comment
Read more

Bootstrap CSS Nesting Example

-
Image
 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 adip...
Post a Comment
Read more

Bootstrap CSS Order Class Example

-
Image
 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. ...
Post a Comment
Read more

Offset Bootstrap Class Example

-
Image
  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 tem...
Post a Comment
Read more

Grid System Example in Bootstrap 5

-
Image
 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 hi...
Post a Comment
Read more

Grid

-
Image
 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...
Post a Comment
Read more