Grid System Example in Bootstrap 5

-

 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 illum eum atque excepturi et! Vel inventore doloremque at labore repellendus sint commodi, exercitationem, placeat, fugit nesciunt numquam id quas est alias cum qui vero voluptate illo dicta. Laudantium maiores sequi quos sint facilis dolores qui vel eligendi veritatis, accusantium dicta id ipsum officia ex. Dignissimos eos voluptates suscipit aperiam ducimus quaerat, illum ullam accusamus? Itaque maiores culpa repellendus ut? Cumque nostrum quae reprehenderit optio ea quisquam architecto sit, libero eos atque, voluptates, nemo laudantium! Laborum nam possimus omnis quia repudiandae aspernatur sint cumque placeat voluptates repellat aperiam perferendis reprehenderit officia dolorem, nihil autem beatae quas sunt, quasi, porro eveniet ut incidunt ad praesentium! Voluptas, molestiae impedit officiis nostrum pariatur expedita quo, quisquam tempora mollitia sapiente veritatis accusamus voluptate repellat ipsum, deserunt modi sed quia. Dolores tempora et ratione, voluptates voluptas tempore amet natus maxime accusantium earum consequuntur vel eum, non nisi! Suscipit adipisci quis maxime vel temporibus repellat ea nisi corrupti ex! Eius officia eos odit earum debitis ex repellat illum, dolorum soluta ullam unde placeat culpa aliquid rerum iusto saepe dolore sed quos et quaerat. Impedit similique, sit sint et nesciunt officia iure aliquid molestiae quia voluptates animi amet! Officia obcaecati odio nostrum inventore sit natus aliquid. Omnis molestias est architecto sed aperiam illum placeat sequi, quidem obcaecati ab nam, debitis, quis autem possimus quae quas fuga laudantium. Odit repellendus, eligendi adipisci rerum ratione maxime iure ducimus perferendis voluptatibus, modi ad aliquid suscipit assumenda. Fugiat aliquid rerum et quidem sequi velit a quo sapiente. Id autem recusandae deserunt quam voluptate eos, quia sequi, cumque, reprehenderit repellendus quaerat perferendis rerum aliquam impedit facilis quidem! Sint laboriosam laborum placeat non tempora, labore praesentium sed nobis! Libero quisquam, accusantium reiciendis itaque, earum enim deleniti porro, consectetur aspernatur fugiat odio nobis est laborum nulla quae voluptatum cupiditate. Consequatur quod explicabo numquam alias quidem ab quos odio inventore at praesentium, saepe possimus cupiditate dolore ratione placeat? In saepe illum animi impedit aliquam quos, consequatur repellendus dolore culpa harum quibusdam dolorum quo quas voluptate fuga dicta tempore distinctio odit neque error voluptatibus necessitatibus qui commodi? Quia et facere aliquid suscipit vero! Possimus, deleniti dolorum maxime est quis minima! Soluta asperiores similique sit tempora corrupti consectetur debitis reprehenderit rerum velit delectus vel autem cupiditate est inventore magnam, incidunt totam amet in id perferendis quas magni libero? Tempora libero rerum tempore quas cupiditate eveniet magni deleniti iste soluta officia aperiam magnam odio quasi ullam delectus eaque, voluptas voluptatem mollitia. Soluta at similique vel veritatis unde optio magni saepe neque error molestiae asperiores ipsam ut consequuntur molestias, eligendi obcaecati nostrum ipsa quasi id. Nostrum, ex aut. Officia aliquid eius a illum repellat architecto, ea porro dolorem dicta beatae at ad in natus veritatis soluta. Inventore.</div>
        <div class="col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa architecto aspernatur esse nihil? Numquam, fugit nisi! Molestiae provident atque obcaecati, dolorem aut saepe laborum dignissimos voluptates, nostrum rem dolores! Consectetur perferendis iste reprehenderit, voluptatum voluptates exercitationem, commodi adipisci omnis quia, fugiat maiores! Aut, quaerat obcaecati quam architecto eveniet doloribus quidem.</div>
    </div>
<!-- Row 4 or Footer -->
<div class="row">
    <div class="col-12 footerow">
        <div class="row">
            <div class="col-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis, sint!</div>
            <div class="col-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi, soluta.</div>
            <div class="col-3">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>
</div>



.CSS



.col-12{
    background-color: aqua;
   
}
.secondRow{
background-color: blueviolet;
}
.col-9{
    background-color: cadetblue;
}
.col-3{
    background-color: brown;
}
.footerow{
    background-color: chartreuse;
}



Output: -







Comments

Post a Comment

Popular posts from this blog

Send Data Child to Parent Component - React Js

-
 App.js: import React from "react" ; import './App.css' import { Student } from "./Components/Student" ; function App () {   function alertFunc ( data )   {     alert ( data )   }   const name = "Krishan Dev"   return (     <div className = "App" >     < Student data = { name } alert1 = { alertFunc } />         </div>   ) } export default App ; ---------------------------- Student.js import React from 'react' export const Student = ( props ) => {   const data = "Bhavesh"   return (     <div>       <h6> { props . data } </h6>       <button onClick = { props . alert1 ( data ) } > Click Me </button>     </div>   ) }
Read more

Hide , Show and Toggle in ReactJs

-
 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ show , setShow ]= useState ( true ) return (   <div>     {       show ? <h1> Hello Bhavesh </h1> : null     }     { /* <button onClick={()=>setShow(false)}>Hide</button>     <button onClick={()=>setShow(true)}>Show</button> */ } <button onClick = { () => setShow (! show ) } > Toggle </button>   </div> ) } export default App ;
Read more

Importance Of Web Content In SEO.

-
Content is one of the most important Google ranking factors. One of the benefits of publishing good content is that it will increase the number of people who find your website through search engines.  Content provides information and this information can be used to educate search engines about your website. Content also provides a great opportunity for internal links.
Read more