Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Bootstrap Determination Flowchart"
Bootstrap 3.3.0 Snippet by
AtiqUrRehman
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
24.5K
 
8 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2 class="text-center">Bootstrap Determination Flowchart</h2> <header> <div class="container"> <h1 class="text-center">Can I use...this service?</h1> </div> </header> <div class="container"> <h2 class="page-header">Step 1: Where is the data?</h2> <div class="row"> <div class="col-xs-12"> <p class="lead text-center bg-info btn text-info center-block">Is the data in the system?</p> <div class="row"> <div class="col-xs-6 text-center"> <p class="btn"><span class="glyphicon glyphicon-arrow-down"></span> </div> <div class="col-xs-6 text-center"> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-success btn-lg">Yes</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="bg-success text-success btn">Okay! Proceed to step 2.</p> </div> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-danger btn-lg">No</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="bg-info text-info btn">Are you willing to put the data into the system?</p> <div class="row"> <div class="col-xs-6 text-center"> <p class="btn"><span class="glyphicon glyphicon-arrow-down"></span> </div> <div class="col-xs-6 text-center"> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> </div> </div> <div class="row"> <div class="col-xs-6"> <p class="center-block"><span class="btn btn-success btn-lg">Yes</span></p> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> <p class="bg-success text-success btn text-wrap">Okay! After the data is in the system, proceed to step 2.</p> </div> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-danger btn-lg">No</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="btn bg-danger text-danger text-wrap">The data must be in the system to use this service.</p> </div> </div> </div> </div> </div> <div class="container"> <h2 class="page-header">Step 2: What type of email is it?</h2> <div class="row"> <div class="col-xs-12"> <p class="lead text-center bg-info btn text-info center-block">What type of email do you want to send?</p> <div class="row"> <div class="col-xs-6 text-center"> <p class="btn"><span class="glyphicon glyphicon-arrow-down"></span> </div> <div class="col-xs-6 text-center"> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> </div> </div> <div class="row"> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-warning btn-lg">Newsletter</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="center-block bg-info text-info btn">Is it directly related to fundraising?</p> <div class="row"> <div class="col-xs-6 text-center"> <p class="btn"><span class="glyphicon glyphicon-arrow-down"></span> </div> <div class="col-xs-6 text-center"> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> </div> </div> <div class="row"> <div class="col-xs-6"> <p class="center-block"><span class="btn btn-success btn-lg">Yes</span></p> <p class="btn"> <span class="glyphicon glyphicon-arrow-down"></span></p> <p class="bg-success text-success btn text-wrap">Okay! You can proceed to step 3. </p> </div> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-danger btn-lg">No</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="btn bg-danger text-danger text-wrap">Content must be directly related to fundraising to use this service.</p> </div> </div> </div> <div class="col-xs-6 text-center"> <p class="center-block"><span class="btn btn-success btn-lg">Solicitation</span></p> <p class="btn center-block"><span class="glyphicon glyphicon-arrow-down"></span></p> <p class="bg-success text-success btn">Okay! Proceed to step 3.</p> </div> </div> </div> </div> </div> <footer> <div class="container"> <hr> <p>Footer information here. For more questions please call the person that you know to call with your questions. </p> </div> </footer>
.text-wrap { white-space: normal; }
Related:
See More
Free Template
Rotating CSS Card
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76