I am doing a webpage with the Bootstrap framework. I want to have a single page, with a form that pops up and has two or three tabs on it. I want this,

The tabs for "The Markup", "The CSS", "The JavaScript". I have them showing up on the top left of the page like it's on the main navbar, but I can't get them anywhere else.

Ideally, I'd like them to be on top of a form and switch between the forms.

Another question that's probably elementary, but to get the buttons like I have them I used this code,

<div class="note-tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#navbar-fixed-html" data-toggle="tab"><strong>The Markup</strong></a></li>
            <li><a href="#navbar-fixed-css" data-toggle="tab"><strong>The CSS</strong></a></li>
            <li><a href="#navbar-fixed-js" data-toggle="tab"><strong>The JavaScript</strong></a></li>
        </ul>
</div>

What does it mean when the href field has a # at the front? This is from an example page at tutsplus and this is what came with the download. There isn't a separate html file for those, so what exactly is that linking to?

Thanks

UPDATE

Here is the form I have, I want to add tabs to the top of this form. One tab that selects this form and another tab that will select another form. The form is place in the middle of the page

/

I am doing a webpage with the Bootstrap framework. I want to have a single page, with a form that pops up and has two or three tabs on it. I want this,

The tabs for "The Markup", "The CSS", "The JavaScript". I have them showing up on the top left of the page like it's on the main navbar, but I can't get them anywhere else.

Ideally, I'd like them to be on top of a form and switch between the forms.

Another question that's probably elementary, but to get the buttons like I have them I used this code,

<div class="note-tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#navbar-fixed-html" data-toggle="tab"><strong>The Markup</strong></a></li>
            <li><a href="#navbar-fixed-css" data-toggle="tab"><strong>The CSS</strong></a></li>
            <li><a href="#navbar-fixed-js" data-toggle="tab"><strong>The JavaScript</strong></a></li>
        </ul>
</div>

What does it mean when the href field has a # at the front? This is from an example page at tutsplus and this is what came with the download. There isn't a separate html file for those, so what exactly is that linking to?

Thanks

UPDATE

Here is the form I have, I want to add tabs to the top of this form. One tab that selects this form and another tab that will select another form. The form is place in the middle of the page

http://jsfiddle/BS4Te/3/

• javascript
• html
• css
• forms
• twitter-bootstrap

3 Answers 3

The # in the front of a element is called "fragment" and they allow you to move across the page.

You can get the popup with the next code:

The HTML code:

<div class="container-popup">
    <div class="popup"></div>
</div>

The CSS code:

.container-popup {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.popup {
    width: 50%;
    height: 50%;
    background: #1abcb9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Check this DEMO

If you want the less "intrusive code", you can use a pseudoelement, as follows:

Check this SECOND DEMO

As you can see in the below example, the HTML code has only one element:

<div class="popup">

Cheers!

EDIT: Check this Fiddle. I only make it with one form, but I think that you'll catch the idea.

Cheers!

Those href fields with # at the front link to id inside same HTML document

For example:

<a href="#section1">Go to Section 1</a>

Is link to id "section1"

<a id="section1">Here is Section 1</a>

Hope this helps!

I have a a form tabbed that works quite well,

HTML:

<ul class="nav nav-tabs form-tabs">
    <li id="basic-list" class="active"><a data-toggle="tab" href="#form1">form 1</a>

    </li>
    <li class="" id="team_details-list"> <a data-toggle="tab" href="#form2">form 2</a>

    </li>
    <li class="" id="identity_information-list"> <a data-toggle="tab" href="#form3">form 3</a>

    </li>
    <li class="" id="address_details-list"> <a data-toggle="tab" href="#form4">form 4</a>

    </li>
</ul>
<div class="tab-content">
    <fieldset id="form1" class="tab-pane active">this is form 1</fieldset>
    <fieldset id="form2" class="tab-pane ">this is form 2</fieldset>
    <fieldset id="form3" class="tab-pane ">this is form 3</fieldset>
    <fieldset id="form4" class="tab-pane ">this is form 4</fieldset>
</div>
<button class="btn btn-success">submit</button>

You can see this on JSFiddle