Tabbed form design using Twitter Bootstrap

Currently, I am working on a website using the Bootstrap framework. My goal is to create a single page that features a pop-up form with two or three tabs. Specifically, I envision these tabs as "The Markup," "The CSS," and "The JavaScript." While I have managed to display them in the top left corner of the page resembling the main navbar, I am struggling to position them elsewhere.

Ideally, I would like these tabs to be situated above a form and have the ability to switch between different forms seamlessly.

Another question I have pertains to the code used for the buttons:

<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>

I am puzzled by the presence of "#" at the beginning of the href field in the code snippet. This was taken from an example page on tutsplus along with the download, yet there seems to be no separate HTML file linked to those tabs. Can you explain what exactly this "#" references?

Thank you

UPDATE

Here is the current form I have set up, and I am looking to incorporate tabs at the top. One tab should correspond to this existing form, while the other should select a different form. The placement of the form is currently in the middle of the page.

http://jsfiddle.net/BS4Te/3/

javascripthtmlcssformstwitter-bootstrap

Answer №1

The symbol # at the beginning of an element is known as "fragment" and enables you to navigate through the webpage.

To display a popup, use the following 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;
}

View this DEMO

If you prefer a less obtrusive code, try using a pseudoelement like so:

View this SECOND DEMO

In the example below, notice that the HTML code consists of just one element:

<div class="popup">

Cheers!

EDIT: Explore this Fiddle. I've simplified it with only one form, but I believe you'll grasp the concept.

Cheers!

Answer №2

If a href field in the HTML document begins with #, it links to an id within the same document.

For instance:

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

This link directs to the id "section1".

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

I hope this explanation clears things up!

Answer №3

I've successfully implemented a tabbed form that functions well.

The HTML structure is as follows:

<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>

Test it out yourself on JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I need help picking out specific elements from this messy HTML code using XPath and lxml - any ideas on how to do

I am looking to extract specific strings from this HTML document using only lxml and clever XPath. The content of the strings may vary, but the structure of the surrounding HTML will remain constant. The strings I need are: 19/11/2010 AAAAAA/01 Normal U ...

pythonhtmlxpathlxml

Is it possible to execute JavaScript code (using Node.js) through AppleScript on MAC OS?

After downloading Node.js for MAC OS from this link: http://nodejs.org/download/ (http://nodejs.org/dist/v0.10.29/node-v0.10.29.pkg), I needed to execute a JavaScript on Google Chrome. To do this, I utilized the following AppleScript code: do shell script ...

javascriptnode.jsmacosgoogle-chromeapplescript

Ways to extract all hyperlinks from a website using puppeteer

Is there a way to utilize puppeteer and a for loop to extract all links present in the source code of a website, including javascript file links? I am looking for a solution that goes beyond extracting links within html tags. This is what I have in mind: a ...

javascripthtmlnode.jspuppeteer

Add motion to the div element when hovering and moving the mouse away

Looking to add animation to a list moving from left to right and vice versa. Now, I want the list to animate from left to right when the mouse hovers over the div, and then animate from right to left when the mouse leaves the div. Can someone assist me wit ...

javascriptjqueryhtmlcss

Inject a snippet of temporary code at the end of the CSS file using JavaScript or JQuery

I am looking to dynamically add temporary CSS code to the end of an external CSS file or modify it using JavaScript or jQuery. For example, let's say my mystyle.css file looks like this: //mystyle.css p{color:red} Now, when a user interacts with the ...

javascriptjquerycss

The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...

htmlcsstwitter-bootstrap

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

"Combining AngularJS with Material Design disrupts the functionality of infinite scroll

Issue: Infinite scroll is loading all pages at once instead of waiting for the user to scroll to the page bottom. Environment: AngularJS 1.3.17 Materials Design 0.10.0 Infinite scroll script: https://github.com/sroze/ngInfiniteScroll Demo being used: The ...

javascriptangularjsmaterial-designinfinite-scrollnginfinitescroll

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

I have been developing a framework that can add validation logic at runtime. This logic can include synchronous, asynchronous, Ajax calls, and timeouts. Below is the JavaScript code snippet: var Module = { Igniter: function (sender) { var getI ...

javascriptjquerypromise

Uncheck all boxes except for the required or disabled boxes in Angular

HTML: <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions"> <div class= "content-section"> <mat-expansion-panel> <mat-expansion-panel-header> ...

htmlangularcheckboxvoiddeselect

Customize your select element's background using jQuery when the content changes

Here is a select element with different options to choose from: <select class="state"> <option value="1">Done</option> <option value="2">Closed</option> <option value="2">Open</option> <option v ...

javascriptjqueryhtml

Arranging and overlaying images with HTML and CSS

Currently, I am in the process of developing a simplistic game through the use of HTML and CSS. The game consists of a background image portraying an alleyway, and my objective is to incorporate additional images on top of this background as clues within t ...

htmlcssz-index

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

javascripthtmlangularjs

Creating a personalized scrollball feature within a fancybox

Within my fancybox, I have a section with images that require a scroll bar. I currently have a scroll bar in place, but I am interested in implementing an anti-scroll (custom scrollbar) instead. I came across one option at https://github.com/Automattic/an ...

javascriptjqueryajaxfancybox

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

phphtml

`Proliferating values through constantly changing addition`

I am facing an issue with my code that involves 3 input fields: <div class="row"> <input onblur="calc_basic_amount();" id="rate_basic"></input> <input onblur="calc_basic_amount();" id="qty_b ...

javascript

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Trigger a click event upon page load using jQuery or JavaScript

I tried searching for this functionality on a different website, but it didn't work on my site. Can you help me figure out how to trigger a click event on page load? On one of my pages, a popup box appears when I click on a "project" link. Here is th ...

javascriptjquery

Executing asynchronous Django AJAX calls on a single URL

I'm encountering an issue with submitting forms in Django. I have two forms, each needing to insert a specific number into the database. Form1: should insert value 1 Form2: should insert value 2 Both forms are located at the URL /kategorije/. When ...

jquerypythonajaxdjangoforms