Flexbox Vertical Centering in Bootstrap 3
How do I make an flexbox vertical centering in bootstrap 3?
What is a flexbox vertical centering in bootstrap 3? How do you make a flexbox vertical centering in bootstrap 3? This script and codes were developed by Jay Holtslander on 18 October 2022, Tuesday.
Flexbox Vertical Centering in Bootstrap 3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Vertical Centering in Bootstrap 3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row"> <div class="col-xs-5 col-xs-offset-1 v-center-640"> <h1>Flexbox Vertical Centering</h1> <p class="lead">An example in Bootstrap 3</p> <p>With a known height, a single flex-child can be made to center in a flex-parent pretty easily.</p> </div> <div class="col-xs-6 v-center-640"> <img src="http://placehold.it/640x420/8866ba/563d7c" class="img-responsive pull-right"> </div> </div>
</div>
</body>
</html>
Flexbox Vertical Centering in Bootstrap 3 - Script Codes CSS Codes
.v-center-640 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 420px;
}
body { background-color: #563d7c;
}
h1 { font-size: 3vw;
}
h1,
h2,
h3 { color: #fff; margin-top: 0px;
}
h1 small,
h2 small,
h3 small { color: rgba(255, 255, 255, 0.5);
}
.lead { font-size: 2vw; color: rgba(255, 255, 255, 0.75);
}
p { font-size: 1.5vw; color: rgba(255, 255, 255, 0.5);
}
Developer | Jay Holtslander |
Username | j_holtslander |
Uploaded | October 18, 2022 |
Rating | 3 |
Size | 2,269 Kb |
Views | 20,240 |
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 |
Awesome Bootstrap 3 Sidebar Navigation | 6,572 Kb |
Google search overlay in Bootstrap | 2,918 Kb |
Bootstrap 3 full height carousel with fancy sticky navbar | 3,289 Kb |
Bootstrap 3 Navbar under a header | 3,119 Kb |
Bootstrap 3 bio thumbs with social overlay on hover | 3,549 Kb |
Bootstrap 3 full height carousel | 2,433 Kb |
Bootstrap 4 Alpha - Pen Template | 2,450 Kb |
Shrinking Bootstrap Navbar | 3,186 Kb |
Multiple Bootstrap Navbars | 3,165 Kb |
Bootstrap List | 4,056 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 |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Border image | JohnRiordan | 2,120 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Reading Grid | Tappily | 4,306 Kb |
Flip test | Madhes | 1,635 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 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!