Bootstrap CSS Nesting Example

-

 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? Assumenda reiciendis ratione aperiam recusandae perspiciatis omnis et architecto odit dolor voluptatibus nulla quas illum qui repellat, autem corrupti ab praesentium ipsum natus eius.</div>
            </div>
        </div>


        <div class="col-md-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur earum dolorum natus, temporibus distinctio rem quam recusandae ad, pariatur blanditiis aut libero excepturi. Optio accusantium iure eaque error cumque voluptate obcaecati voluptatum necessitatibus libero quis, dolorem nisi rem labore? Eos rerum voluptates, nostrum omnis consequatur voluptatem fugit illo accusamus? Ut.</div>
    </div>
</div>


CSS:

.col-md-8{
    border: 2px solid red;
}
.col-md-4{
    border: 2px solid red;
}
.col-md-6{
    border: 2px solid red;
}


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