I am trying to update to BootStrap 4 from BootStrap 3 on my localhost.
And I got this result which is from bootstrap 3
Here is a code which I use to link
<link rel="stylesheet" href="css/bootstrap.min.css">
And code for this inline form is here
<form class="form-inline">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email#example.com">
</div>
<div class="form-group mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Confirm identity</button>
</form>
But when I put a test file outside from the project folder and link to same CSS file then at that time it gives me result
Which is expected result
Please help me to solve this problem.
You need to clear your browser cache. If your problem persists, you need to check whether there is any other CSS changing your styles. If there is no such CSS, you need to check whether there is some Javascript overriding your styles. Switch off Javascript in your browser temporally and if the design is better this way, then after you switch Javascript back on, debug your JS code and see when is it changing your styles.
Related
I am trying to make a file upload styling with bootstrap. Following code works good but the problem is that the label Choose file stick with a downline of the input field. How can I make Choose file in the middle of an input field? To get a better idea check picture bellow-
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
If you are using Bootstrap 3 try Switching to Bootstrap 4 it works fine.
The CDN link you can include
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Or you might have used any CSS in the parent class of input field try checking that
Same code you provided gives correct output (i have included above link)
I'm facing a weird issue using bootstrap's inline-form together with a React component.
When using the example data as shown on the official doc's page directly in my rendered output (changing class to className as well as for to htmlFor):
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
inside my page, everything works as expected.
When I copy the same (reactified) code into the render function of my component, the paddings between the inputs are missing somehow.
As it turns out, this issue has somehting to do with how the html/markup is rendered or passed to the browser. From React, the markup is one single string without any indentations (which can be seen through dev-tools).
When removing all the indentations (via dev-tools) from bootstrap's official page, the same thing happens there as well.
Can anyone tell me why this happens and if there is anything I can do, e.g. tell React to indent the output or something?
Note: I'm not using Bootstrap 4. It's the latest in version 3.
When selecting the form element's node in dev-tools, RightClick -> Edit as HTML, the following is shown:
<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>
Which is the unformatted, unindented string causing the issue.
So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.
I have created a jsfiddle to replicate the problem here.
<form class="" action="php/process_login.php" method="post">
<legend>Login</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" name="username" id="username" class="">
<label>Username</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="password" name="password" id="password" class="">
<label>Password</label>
</div>
<div class="form-group">
<input type="submit" class="mui-btn mui-btn--raised" value="Login">
</div>
</form>
I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.
Could anyone suggest how I can fix this please?
You have to load also MUI javascript with
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Working Demo.
You haven't embed the Javascript file, paste this in of your top of you page in the head section:
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
When serving the source files, the following angular form renders correctly and the button submits correctly when pressed (i have reduced the size of the form to keep things concise)
<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group">
<label class="control-label col-md-2" for="price">Price:</label>
<div class="col-md-10">
<input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
</fieldset>
</form>
But after minifying (with Grunt and Usemin) and serving the minified files from the Dist folder, then the form inputs render correctly, but the submit button is simply not there.
The relevant section of the dist/scripts/script.*******.js shows the button html is still present
a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n </fieldset>\r\n \r\n </form>
Clearly the Grunt minification has sent the button to the dist folder, but it just doesn't render, either in chrome or firefox or from heroku.
The only strange thing i can point to are these strange spaces that were inserted into the build file along with a bunch of newlines and carriage returns.
If this is to blame, what can be done? Also, why would the grunt file insert spaces around the button? It also did it in a couple of other areas. But in any case, manually removing the spaces and newlines did not seem to resolve the problem
In another very similar form, the button also doesn't render after minifying. There are also some spaces inserted into that part of the minified scripts file. All other buttons in the app render and function correctly after minifying
My editor is Visual Studio Code
Please help me to see what it is i have done wrong!
I fixed the problem
It was a small mistake in one of the input fields. Not the one i posted above, actually.
I wrote a textarea tag acccidentally as a self-closing tag, in the manner of old input tags
<textarea something something /></textarea>
unminified this was interpreted as i intended it to be, and so of course the error was never detected
but in the minification process it was reduced to
<textarea something something />
which never closed properly and therefore removed some subsequent blocks
so I think I can generalize from this:
the html parser can handle some mistakes before minification, but the minification parser may handle errors differently and afterwards the errors may appear
so any strange post-minification errors should result in careful scrutiny of the html for correct tag formatting
I'm still young when it comes to coding, and I've heard multiple things about organization. Some use section's and some use div's, some use a div for buttons, other use the inputs in css to change it. As someone who likes to do his code clean and simple to understand, yet correct, this sometimes bothers me.
What is the best way to make a login form, with the for example the maximum of remember me and a button, with a text under saying "You don't have an account yet? Register here".
Should I use divs, sections, or both? What are the orders of the divs/sections? Container, Login, buttons?
Example:
<div class="container">
<div class="login">
<form>
<input text>
<remember me>
<div class="buttons">
<input submits>
</div>
</form>
</div>
</div>
Is this correct? Is there a way of doing it more organized?
What the most correct, used, simple and clean way to make it?
Bootstrap makes it really easy to do forms w/ minimal styling, with the exception of font sizes, colors, etc, but they add extra elements, like the form-group so you don't have to add extra CSS. I like to always use article, header, section, footer, etc whenever I can.
I understand that div is basically a "whatever" element. Bootstrap uses divs throughout their examples, but just b/c it's a div on THEIR example, doesn't mean you cannot use something else.
It also depends a whole lot on your layout. Perhaps you have the login on one page, but you have background images, centering the login form, etc, so this will determine which types of elements that you use.
<div id="login">
<div class="form-group">
<input type="text" class="form-control" name="username" />
</div>
<div> class="form-group">
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group form-inline">
<input type="checkbox" />
<label>Remember Me</label>
</div>
<div class="form-group">
<input type="submit" value="Login" />
</div>
</div>
This could easily be turned into
<article id="login">
<section class="form-group">
<input type="text" class="form-control" name="username" />
</section>
<section class="form-group">
<input type="password" class="form-control" name="password" />
</section>
<section class="form-group form-inline">
<input type="checkbox" class="form-control" />
<label>Remember Me</label>
</section>
<footer class="form-group">
<input type="submit" value="Login" />
</footer>
</article>
I tend to like the latter, but it's your decision really.
It all depends on 'what you use' and 'what you want to end with'.
If you want to add a complex css stylesheet or most of the work will be done on the server side, then you should better have a detailed composition.
In another hand, if you plan to use javascript and few css, the clearest the best.
To me, the login part (or its container, ie a header) of your page should be a section. The divs should be used to organize the inner-elements.
"The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
[http://www.w3schools.com/tags/tag_section.asp]
I depends really basicly what you can handle better.