Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does Bootstrap 3 have a pre-built steps option for forms?

enter image description here

Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?

If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?

like image 339
MrPizzaFace Avatar asked Feb 25 '14 01:02

MrPizzaFace


People also ask

What are the different types of bootstrap form layouts?

Bootstrap provides three types of form layouts: 1 Vertical form (this is default) 2 Horizontal form 3 Inline form More ...

What are the default settings for Bootstrap forms?

Bootstrap's Default Settings. Form controls automatically receive some global styling with Bootstrap: All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Do I need Autoprefixer If I'm using bootstrap?

If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile. Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

What is the width of form-control in Bootstrap?

Form controls automatically receive some global styling with Bootstrap: All textual <input> , <textarea> , and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts


2 Answers

You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:

https://github.com/acornejo/bootstrap-nav-wizard

demo here: http://acornejo.github.io/bootstrap-nav-wizard/

Preview (orig):

Bootstrap 3 Nav Wizard preview 1

Preview (customized):

Bootstrap 3 Nav Wizard preview 2

like image 154
Matěj Kříž Avatar answered Nov 09 '22 01:11

Matěj Kříž


Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.

Fiddle

enter image description here

HTML

<h3>Wizard</h3>
<div class="wizard">
    <a><span class="badge">1</span> Set Global Properties</a>
    <a><span class="badge">2</span> Specify Entry Scheme</a>
    <a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
    <a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>

CSS (or SCSS instead)

.wizard a {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}
.wizard a:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard a:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
    border: none;
}
.wizard a:first-child {
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
    -webkit-border-radius: 0 4px 4px 0;
       -moz-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
}
.wizard .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}
.wizard a:first-child .badge {
    margin-left: 0;
}
.wizard .current {
    background: #007ACC;
    color: #fff;
}
.wizard .current:after {
    border-left-color: #007ACC;
}
    
like image 43
Adrian Enriquez Avatar answered Nov 09 '22 03:11

Adrian Enriquez