Currently in the process of developing a social networking platform for a specific student community and more.
In order to improve user experience, I am aiming to center this form on the webpage.
If interested, you can view my progress here: http://jsfiddle.net/WgSgW/
Any suggestions on how to achieve this centred alignment? - The method that has been somewhat effective for me involves utilizing the offset# classes.
Make sure to switch out your form container, .span9, with .span12 to fully stretch the row across the screen. Then, define your login table as display: inline-block and text-align:center all the content within your form using these classes:
I personally created custom classes to avoid interfering with Bootstrap's default settings.
CSS
.login {
text-align: center;
}
.center {
*display: inline; /* for IE 7 */
display: inline-block;
text-align: left; /* resetting alignment to the left while keeping the container centered */
zoom: 1; /* fixes for IE 7 */
}
HTML
<div class="container">
<div class="row">
<div class="span12 login">
<form action="" enctype="multipart/form-data" method="post">
<table class="center">
<tr id="auth_user_email__row">
<td class="w2p_fl"><label for="auth_user_email" id="auth_user_email__label" style="display:none;">Email: </label></td><td class="w2p_fw">
<input class="string" id="auth_user_email" name="email" placeholder="email address" type="text" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="auth_user_password__row">
<td class="w2p_fl"><label for="auth_user_password" id="auth_user_password__label" style="display:none;">Password: </label></td><td class="w2p_fw">
<input class="password" id="auth_user_password" name="password" placeholder="password" type="password" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="submit_record__row">
<td class="w2p_fl"></td><td class="w2p_fw">
<input class="btn btn-large btn-primary" type="submit" value="Signup" />
</td><td class="w2p_fc"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="pagination-centered">
By signing up, you are accepting our <a href="/legal/agreement/">terms & conditions</a>
</div>
</div>
Demo Link: http://jsfiddle.net/WgSgW/1/
When it comes to positioning elements in Twitter Bootstrap, the most common method is to use the offset# classes. In your specific situation, you can utilize:
<div class="span4 offset4"> ... </div>
To see an example, check out this link
To achieve center alignment, the table needs to be styled with margin: 0 auto;
Give it a try, it should do the trick.
Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...
While this might appear to be a simple question, it has been troubling me for some time now. Let me elaborate on what I am trying to accomplish. I have a collection of images in a gallery, and my goal is to center each image vertically within its contain ...
Hey everyone, I'm having trouble getting the carousel from Bootstrap to work properly. I copied the code without making any changes, but for some reason, the carousel is not functioning (can't move to the next slide). Does anyone have a solution ...
Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a <link rel="stylesheet"> tag in the <head> section, while jQu ...
Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...
Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...
My goal is to have the blue square fade in on the first button click, then fade out while the red square fades in on the second click. Unfortunately, it seems that my current code is not achieving this effect. I'm open to any suggestions or help on h ...
Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...
I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...
I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...
How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...
I am working on an HTML page and I am trying to create a link that appears to go to 'example.html' but actually goes to 'javascript:ajaxLoad(example.html);'. Here is what I have tried: <a href="example" onclick="javascipt:ajaxLoad( ...
I am trying to resize a div and iframe using a toggler, but I am facing some challenges. I have experimented with different solutions such as and , but they are not working smoothly when one div is placed beside an iframe. Even when placing the iframe in ...
Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...
Having trouble passing the selected values of two comboboxes to another PHP file using AJAX. How can I pass both values in one function? <script> function showUser(str,str2) { if (str == "" || str2 =="") { document.getElementById("tx ...
I've been working on this issue for a while now but just can't seem to find a solution. The website appears to be zoomed in for some reason, and I'm struggling to identify the cause. Here is the meta tag I've been using: <meta name= ...
I am trying to style elements differently based on whether the client browser supports hovering or not. I came across media features as a solution and implemented it in the following way: /* Supports hovering */ @media (hover: hover) { ... } /* Does not ...
I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...
My slider has navigation arrows, and when the arrow is double-clicked, a div behind the #slider1, which is .content-wrapper, gets selected unexpectedly. Here is a screenshot showing the issue: http://gyazo.com/e66ab776b60455d8b496b46e3077099a If the arrow ...
How can we determine the amount of time a user spends on a webpage using C# code? Are there any available open source projects in .NET that enable us to track the time spent? ...