Bootstrap Mockup

Developer
Zenvercoder
Size
5,240 Kb
Views
6,072
  1. Bootstrap Mockup Previews
  2. Bootstrap Mockup HTML Codes
  3. Bootstrap Mockup CSS Codes

How do I make an bootstrap mockup?

Played around and learned a bunch. To customize, change the white text, add your own links and images and voila! You have your very own responsive webpage! (sweet). What is a bootstrap mockup? How do you make a bootstrap mockup? This script and codes were developed by Zenvercoder on 15 January 2023, Sunday.

Bootstrap Mockup Previews
IQ Test

Bootstrap Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Mockup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- TO DO learn how to import images to codepen -->
<!-- oh..
"For an image to show up on Codepen.io it must be hosted on the web."
https://css-tricks.com/forums/topic/how-to-with-codepen/
sweeeeeeet. Figured it out. Best feeling in the world -->
<html lang="en">
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootStrapPage.css"> <!--to include bootstrap--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title>
</head>
<body> <!--Use .container-fluid for a full width container, spanning the entire width of your viewport.--> <div class="container-fluid"> <div class="row"> <div class="tease"> Aww <a target="_blank" href="https://cdn.meme.am/instances/300x300/39580992.jpg">yeah</a>, Bootstrap 4 is coming! </div> </div> <div class="grid"> <div class="row nav-bar"> <div class="col-12"> <a target="_blank" href="https://getbootstrap.com/"> <bold>Bootstrap</bold> </a> <a target="_blank" href="https://getbootstrap.com/getting-started/">Getting Started</a> <a target="_blank" href="https://getbootstrap.com/css/">CSS</a> <a target="_blank" href="https://getbootstrap.com/components/">Components</a> <a target="_blank" href="https://getbootstrap.com/javascript/">Javascript</a> <a target="_blank" href="https://getbootstrap.com/customize/">Customize</a> <!--<div class="col-12">TO DO: figure out how to get space before themes</div>--> <!--<div class="col-12"></div>--> <!--<div class="col-12"></div>--> <a target="_blank" href="https://themes.getbootstrap.com/">Themes</a> <a target="_blank" href="https://expo.getbootstrap.com/">Expo</a> <a target="_blank" href="https://blog.getbootstrap.com/">Blog</a> </div> </div> </div> <div class="purple-bootstrap"> <!--fa-3x to increase the size (can go to 5)--> <div> <button type="button" class="btn btn-primary-outline btn-lg big-B">B</button> </div> <p class="popular">Bootstrap is the most popular HTML, CSs, and JS framework for developing responsive, mobile first projects on the web.</p> <!--<button type="button" class="btn btn-primary-outline">Primary</button>--> <a class="download btn btn-primary-outline" target="_blank" href="https://getbootstrap.com/getting-started/#download" role="button">Download Bootstrap</a> <div class="current">Currently v3.3.6</div> </div> <div class="row"> <!--<img src="../images/bootStrapPurple.png" class="img-responsive"></img>--> </div> <div class="row designed"> <div> <div class="everyone">Designed for everyone, everywhere</div> <div class="row everywhere"> BootStrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. </div> </div> </div> <div class="grid"> <div class="row"> <div class="col-4"> <img src="http://www.ishouty.com/blog/content/images/2014/11/sass-less--1-.png" alt="sass{less}"> <h2>Preprocessors</h2> Bootstrap ships with vanilla CSS, but its source code utilizes the two mist popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source </div> <div class="col-4"> <img src="http://www.wfhworks.com/img/devices-33.png" class="img-responsive features" alt="every device"> <h2>One framework, every device</h2> Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tables to desktops with CSS media queries </div> <div class="col-4"> <img src="https://getbootstrap.com/assets/img/components.png" class="img-responsive features" alt="features"> <h2>Full of features</h2> With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins </div> </div> </div> <div class="row documentation"> Bootstrap is open source. It's hosted, developed, and maintained on GitHub </div> <div> <a target="_blank" class="github btn btn-primary-outline" target="_blank" href="https://github.com/twbs/bootstrap" role="button">View the GitHub Project</a> </div> <div class="footer"> <div class="row links"> <a target="_blank" href="https://github.com/twbs/bootstrap">GitHub</a> <a target="_blank" href="https://twitter.com/getbootstrap">Twitter</a> <a target="_blank" href="https://getbootstrap.com/getting-started/#examples">Examples</a> <a target="_blank" href="https://getbootstrap.com/about/">About</a> </div> <div>Designed and build with all the love in the world by <a target="_blank" href="https://twitter.com/mdo">@mdo</a> and <a target="_blank" href="https://twitter.com/fat">@fat</a>. Maintained by the <a target="_blank" href="https://github.com/orgs/twbs/people">core team</a> with the help of our <a target="_blank" href="https://github.com/twbs/bootstrap/graphs/contributors">contributors</a>. </div> <div>Code licensed <a target="_blank" href="https://github.com/twbs/bootstrap/blob/master/LICENSE">MIT</a>, docs <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</div> </div> </div>
</body>
</html>
<!-- from documentation:
Set background-color: #fff; on the body
Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
Set the global link color via @link-color and apply link underlines only on :hover
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns
as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful
mixins for generating more semantic layouts.
Info on media queries, grid options, stacked-to-horizontal, fluid container, mobila and desktop, <meta name="viewport" content="width=device-width, initial-scale=1"> <!--https://getbootstrap.com/css/-->
<!--This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more
like a native application. Overall, we don't recommend this on every site, so use caution!-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<!--media queries small devices-->
<!--@media (min-width: @screen-sm-min) { ... }-->
</body>
</html>

Bootstrap Mockup - Script Codes CSS Codes

* {
/* I use a skinny red border to see the divs better. I comment it in and out as needed */ /*border: 1px solid red;*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; /*columns seem to be wrapping w/ smaller screen now*/ box-sizing: border-box; margin: 0;
}
html body { /*Better Helvetica CSS https://css-tricks.com/snippets/css/better-helvetica/*/ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; line-height: 1.42857143; color: #333; background-color: #fff; text-align: center;
}
a { color: #563d7c; text-decoration: none; background-color: transparent; cursor: auto;
}
.tease { color: #fff; display: block; padding: 15px 20px; font-weight: bold; font-size: 14px; text-align: center; background-color: #0275d8; /*margin-top: 5px;*/
}
.tease a { color: #fff;
}
.nav-bar { /*padding just makes the row thicker*/ /*padding: 15px;*/ margin: 0; background-color: #fff; border-bottom: 0; font-weight: bold; font-size: 15px; line-height: .2%;
}
p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;
}
.col-12 { width: 100%; /* display: flex; flex-wrap:wrap; Lined up against each other with no margin, even with left and right margin*/ /*margin not doing anything maybe b/c display: inline-block?*/ /*margin: 0 55px 0 25px;*/ /*TO DO fix spacing*/ display: inline-block;
}
@media screen and (max-width: 750px) { .col-12 { /*display: block:*/ width: 100%; display: flex; flex-wrap: wrap; }
}
.purple-bootstrap { background-color: #6f5499; color: white; margin: auto; width: 100%; font-size: 20px; /*TO DO un-hardcode size*/ height: 600px; text-shadow: 0 1px 0 rgba(0, 0, 0, .1); padding: 80px;
}
.purple-bootstrap a { color: #fff;
}
@media (min-width: 992px) { .purple-bootstrap { width: 970px; }
}
@media (min-width: 768px) { .purple-bootstrap { padding: 80px 0; }
}
/*changed from .button to .btn and it finally worked!*/
.btn { background-color: transparent; color: white; /*font-size: 90px;*/ border-radius: 5px; border: 1px solid white; width: 105px; height: 105px; margin: auto; padding: 30px; /*padding-bottom: 50px;*/ /*margin: 93px;*/
}
.big-B { border: 1px solid white; width: 144px; height: 144px; font-size: 108px; line-height: 140px; font-weight: 600; border-radius: 20px; padding: 15px 15px 25px 15px; margin: 0 auto 30px; /*box-sizing: border-box;*/ display: block;
}
.popular { width: 80%; /*margin: auto;*/ padding: 25px; font-size: 30px; font-weight: 300; line-height: 1.4; margin: 0 auto 30px;
}
.download { padding: 15px 30px 15px 30px; font-weight: 500; border-radius: 5px; font-size: 20px; /*margin: 20px;*/ /*margin-bottom: 25px;*/
}
.current { padding: 55px; color: rgba(255, 255, 255, .5); font-size: 14px;
}
.designed { padding: 80px;
}
.everyone { width: 90%; font-size: 39px; font-weight: 500; line-height: 1.4;
}
.everywhere { font-size: 21px; line-height: 1.4; width: 90%; margin: auto;
}
.grid { padding-right: 15px; padding-left: 15px; margin: 30px;
}
img { box-sizing: border-box; width: 75%; display: inline-block;
}
.col-4 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 33%; /*display: flex; flex-wrap:wrap;*/ display: inline-block;
}
@media screen and (max-width: 750px) { .col-4 { /*display: block:*/ width: 100% /*display: flex; flex-wrap:wrap;*/ }
}
.features { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; /*display: flex; flex-wrap:wrap;*/ display: inline-block;
}
.documentation { padding: 50px;
}
.github { background-color: transparent; color: #563d7c; border-color: #563d7c; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;
}
/*http://stackoverflow.com/questions/23668104/bootstrap-3-button-hover-focus-state*/
.github:hover { background-color: #563d7c; color: #fff; border-color: #563d7c;
}
.footer { background-color: #322634; display: block; box-sizing: border-box; color: #99979c; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; /*TO DO un-hard-code size*/ margin: 100px 0 10px; padding: 40px; text-align: left; text-decoration: none; cursor: auto; font-size: 14px; line-height: 1.42857143;
}
.footer a { color: white;
}
.links { /*does nothing*/ /*width: 30%;*/
}
@media (min-width: 768px) { .footer { margin-bottom: 0; }
}
Bootstrap Mockup - Script Codes
Bootstrap Mockup - Script Codes
Home Page Home
Developer Zenvercoder
Username zenvercoder
Uploaded January 15, 2023
Rating 3
Size 5,240 Kb
Views 6,072
Do you need developer help for Bootstrap Mockup?

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!

Zenvercoder (zenvercoder) Script Codes
Name
Practice
Chips
My first CSS shape
A Pen by zenvercoder
Material Design Lite menu demo
CSS layout practice - card making
Mobile email example page
Focotrain.ninja
Ommm visualizer
Animal Trading Card
Create amazing marketing copy with AI!

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!