Skip to main content

 

Master Bootstrap 5 Responsive Grid Layout Design in Hindi in 2020

Html

 <div class="container-fluid">
    <div class="center">

    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-12 col-lg-12 bg-danger">
            <p>just for demo</p>
          </div>
        </div>
      </div>
      <!-- rightside -->
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-12 col-lg-6 bg-info">
            <p>just for demo</p>

          </div>
          <div class="col-12 col-lg-6 bg-success">
            <p>just for demo</p>

          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 bg-secondary">
            <p>just for demo</p>

          </div>
          <div class="col-12 col-md-6 bg-primary">
            <p>just for demo</p>

          </div>
        </div>
      </div>
    </div>
  </div>

   </div>

Css


*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
 
}
.center{
  height: 90vh;
}
.bg-danger{
  height: 90vh;
  background-image: url(b5img/left-banner-image.jpg);
 
}
.bg-info {
  height: 45vh;
  background-image: url(b5img/p5.jpg);
  background-size: cover;
}
.bg-success {
  height: 45vh;
  background-image: url(b5img/p6.jpg);
  background-size: cover;

}
.bg-secondary{
  height: 45vh;
  background-image: url(b5img/p3.jpg);
  background-size: cover;

}
.bg-primary {
  height: 45vh;
  background-image: url(b5img/team1.jpg);
  background-size: cover;

}



Comments

Post a Comment

Popular posts from this blog

javascript full guid  JavaScript is a dynamically typed language. Because data type will automatically assigned at the time of compilation or code execution. Jb b ap function return kra gha to variable ma store kra sakty ha sirf console log say ni kr sakty return //datatypes are based on memory allocation Primitive datatypes ->  call by value (string , number , boolean ,null,undefined, BigInt , symbol) -> Stack memory Reference / Non primitive data types -> call by reference ( array , object , function ) -> heap memory JavaScript is a dynamically typed language . This means that you don ' t need to specify the data type of a variable when you declare it . 01_variables.js const accountId = 144553 let accountEmail = " hitesh@google.com " var accountPassword = " 12345 " accountCity = " Jaipur " let accountState ; // accountId = 2 // not allowed accountEmail = " hc@hc.com " accountPassword = ...
Post a Comment
Read more
<! DOCTYPE html > < html lang =" en ">   < head >     < meta charset =" UTF-8 " />     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />     < title > Document </ title >     < link href =" https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css " rel =" stylesheet ">     < link rel =" stylesheet " href =" style.css " />   </ head >   < body class =" overflow-x-hidden ">     < nav class =" flex justify-between items-center mt-5 px-5 md:px-16 ">       < a class =" flex items-center gap-2 " href =" # ">< img src =" https://demo.themesberg.com/landwind/images/logo.svg " alt ="">< h4 class =" font-bold text-[18px] "> Landwind </ h4 ></ a >       < div >         < ul class =" fle...
Post a Comment
Read more
< div class =" box ">     < img src =" b5img/1.jpg " alt ="">     < div class =" overlay ">       < div class =" icon ">         < i class =" ri-facebook-fill "></ i >         < i class =" ri-whatsapp-line "></ i >         < i class =" ri-instagram-line "></ i >       </ div >     </ div >   </ div > . box {   width : 25vw ;   position : relative ;   overflow : hidden ; /* Ensure the overlay stays within the box */ } . box img {   width : 100% ; /* Use 100% width to fill the container */ } . overlay {   position : absolute ;   bottom : 20px ;   width : 100% ;   display : flex ;   justify-content : space-around ;   align-items : center ;   opacity : 0 ;   transition : all 1s ease ;   transform : tr...
Post a Comment
Read more