I'm using meteor with the bootstrap package. (here is a chunk of code where my problem is)
<div class="input-prepend">
<span class="add-on">#</span>
<input class="span2" id="prependedInput" size="16" type="text">
</div>
This is what it ends up looking like
Upon inspection I find that there is a margin-bottom : 9px on the textfield which is causing the problem
Why is this happening, the 9px margin is from the bootstrap css. Meteor adds the <!DOCTYPE html> tag anyway so It shouldn't be this. I can fix this by forcing an override of the style but I don't get why the margin-bottom is added into the css file itself. Is there functionality to it?
EDIT Its fixed in newer bootstrap. I uppdated bootstrap manually from 2.0.2
If anyone runs into this problem,
The issue isn't really with meteor its with bootstrap (2.0.2) update it manually by changing the files in /usr/local/meteor/packages with the new bootstrap files (make sure you only update the files which are already there).
Im sure this would be fixed in a newer version of meteor as it updates to the latest bootstrap
Related
I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:
bundle add bootstrap
It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added
#import "bootstrap";
#import "bootstrap-sprockets";
to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.
I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.
This is how it looks
(https://i.stack.imgur.com/R630H.png)
<div class="container">
<div class="jumbotron text-center">
<h1>
This is my header
</h1>
<p>
Hello this should maybe someday be a jumbotron
</p>
</div>
<div class="callout callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
<button class="btn btn-success">Green button</button>
</div>
Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4
I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository
I tried using a full html5 template and adding
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?
I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did.
Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/
Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/
Happy hacking!
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>
I have used a bootstrap pop over in ng-repeat. Below code snippet for the same
<div class="useBootstrap col-sm-2" data-toggle="popover" data-container="body" data-content="AdditionalContents to be shown" data-trigger="click hover">
{{ row.FileName | limitTo: 15 }}{{row.FileName.length > 15 ? '...' : ''}}
</div>
I have a bootstrap version *!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. in my application
If I include a lower version of bootstrap - It renders perfectly.The 1st image when including 3.0, 2nd image if i use 3.3, How can i make it work in 3.3 version because I cannot change the version of bootsrap in my application now just for this pop up.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
I see that you are using the Vanilla Bootstrap popovers. I tried using them too, but I never achieved my desired outcome. So, I investigated an alternative, Angular BootstrapUI (otherwise known as BootstrapUI), which solved most of my problems.
This probably isn't the answer you're looking for, but I would suggest trying out the BootstrapUI popovers. I've found the upside to using these popovers makes integrating templates much easier, and they don't rely on extraneous jQuery. The downside is that their style is more difficult to customize. I still haven't figured out how to have popovers with different styles in BootstrapUI. In Vanilla Bootstrap, customizing popover styles is fairly trivial.
I haven't had any problems with Vanilla Bootstrap's JS, but for now you should stick to a version that is most compatible with your app.
EDIT: when I load my page on local with no CSS files, the date picker works just fine. How do I doctor my css / bootstrap less files to get them to leave the date picker alone???
Im running this on up to date chrome desktop with some bootstrap styling thrown in. Chrome desktop supposedly has date picker support, and the chrome date picker input UI displaying, and the arrows are working, however the drop down carrot that displays the calendar is really buggy (doesnt always display). Some days it drops down, other days it doesnt. Any idea what could be going on? I've tried removing all of the bootstrap and other css, divs etc, till buggy. This is a backend part of the site, and as such it doesnt need cross browser support, and I'd rather not further pollute my javascript with more jquery...
<div class="col-sm-3">
<div class=form-group><label>Created After</label>
<input class="form-control" type="date" name="created" style="color: #000000;">
</div>
</div>
You could use a datepicker for bootstrap: Bootstrap Datepicker
I used it for a project I worked on, didn't cause any problems. Documentation is provided, if you're not using bower, you can just add the Javascript and CSS file to get it working.