Bootstrap grid sistem
How do I make an bootstrap grid sistem?
What is a bootstrap grid sistem? How do you make a bootstrap grid sistem? This script and codes were developed by Ddimonn8080 on 01 August 2022, Monday.
Bootstrap grid sistem - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap grid sistem</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="container"> <div class="row"> <div class="mainWrapper"> <div class="col-md-6 col-md-push-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate, odit illo suscipit illum minima. Blanditiis quo ad quod corporis.</div> <div class="col-md-6 col-md-pull-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint adipisci possimus sapiente, nobis iure amet.</div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="bgWrapper"> <div class="col-md-6 coll-md-push-6 col-sm-12 bg first"></div> <div class="col-md-6 col-md-pull-6 col-sm-12 bg second"></div> </div> </div> </div>
</div>
<div class="wrapper"> <div class="container"> <div class="row"> <div class="mainWrapper"> <div class="col-md-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate, odit illo suscipit illum minima. Blanditiis quo ad quod corporis.</div> <div class="col-md-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint adipisci possimus sapiente, nobis iure amet.</div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="bgWrapper"> <div class="col-md-6 col-sm-12 bg first"></div> <div class="col-md-6 col-sm-12 bg second"></div> </div> </div> </div>
</div>
</body>
</html>
Bootstrap grid sistem - Script Codes CSS Codes
* { color: #fff;
}
.bgWrapper div,
.mainWrapper div { height: 200px;
}
.container { max-width: 700px;
}
.bg.first { background: url(http://www.hdwallpapers.in/walls/golden_gate_bridge_san_francisco-wide.jpg) no-repeat left bottom; background-position: cover;
}
.bg.second { background: green;
}
.wrapper { position: relative; z-index: -1;
}
.container-fluid { top: 0; bottom: 0; right: 0; left: 0; position: absolute; z-index: -1;
}
.container .row { background: rgba(0, 0, 0, .2);
}
.mainWrapper div { position: relative; z-index: 9999; padding: 20px 15px;
}
Developer | Ddimonn8080 |
Username | ddimonn8080 |
Uploaded | August 01, 2022 |
Rating | 3 |
Size | 1,927 Kb |
Views | 54,648 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Menu | 3,823 Kb |
Menu icons css | 2,200 Kb |
A Pen by ddimonn8080 | 22,065 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Blog | Rottingroom | 1,430 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Slick Slider | Wearebold | 5,913 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!