//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>
Related
Is there is any ant design CSS documentation like bootstrap available?
We are using ng-zorro-antd framework to build Angular application.
ng-zorro-antd provide grid compnents:
<div nz-row>
<div nz-col nzSpan="6">col-6</div>
<div nz-col nzSpan="6">col-6</div>
</div>
But its not feasible to use angular component at every html design/structure we want something like the below class.
<div class="ant-row">
<div class="ant-col-6">col-6</div>
<div class="ant-col-6">col-6</div>
</div>
Also Need to know about performance of CSS based grid Vs component or directive based structure.
Is there is any performance impact?
I am trying to style my custom joomla component but found out using standard bootstrap syntax is not working.
I tried the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
</div>
</div>
But the columns are stacked under eachother. I tried adding the bootstrap CDN in my component page, but the Joomla menu falls apart when doing that.
What can I do to make bootstrap work?
The default Joomla 3.x templates and many third party Joomla templates use Bootstrap 2 so Bootstrap 3 or 4 column classes won't necessarily work.
You have a few options:
Use column classes from the version of Bootstrap that is being loaded on your Joomla website
Replace the version of Bootstrap that is being loaded with Bootstrap 4 using a third party extension e.g. Toggle Bootstrap (free) or jQuery Easy (free) or similar
Manually code a solution to replace the version of Bootstrap that is being loaded with Bootstrap 4 (for some example code for this, see the answers to https://joomla.stackexchange.com/q/4953/120)
Change to a Bootstrap 4 template such as JoomShaper Helix Ultimate (free)
I recommend the last option at this will put you in good shape for the upgrade to Joomla 4 within the next 12 months or so. Joomla 4 will use Bootstrap 4.
col-md-x will only activate on medium screen sizes (768px) or higher since bootstrap is a mobile first approach. Try changing col-md-4 and col-md-8 to col-4 and col-8
I am looking a at large project that used Foundation version 4.x . This project has used the grid extensively: almost all HTML pages have
css classes from version 4x such as
row, large-12 columns, panel, callout
I am trying to figure out a few basic methods to transition ?
question :are row, columns and panel classes still supported ?
how to translate old row and column to new grid classes i.e. if I have a
<div class="row>
<div class="large-12 columns">
what is the equivalent in Foundation 6?
The Flex Grid or Float Grid is supported still, however you need to import Foundation slightly differently.
To use the Float Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-float.css in place of foundation.css.
In Sass: set both $xy-grid and $global-flexbox to false.
To use the Flex Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-flex.css in place of foundation.css.
In Sass: set $xy-grid to false.
To update your HTML to use the XY Grid
Based on the example you have given, the most direct 'conversion' would be:
<div class="grid-x">
<div class="cell">
You can learn more about the XY Grid system here
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.
I am currently trying to write some media queries to make my site responsive to other devices. I normally build my sites in Joomla and tend to use modules that are switched off using media queries and mobile modules that are switched on i.e. display: none, display: block..
With the Shopify store that I have built using the Timber Framework, I am not sure if i can implement the same methods, although the timber framework is responsive there are some elements that are not sitting correctly.
For example I am currently trying to sort my header layout for a mobile. Currently for the desktop I have a logo, contact button, search button and cart and this sits the way i need it.
<div class="grid--full grid--table">
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
</div>
Now if I wanted to change the code for a mobile to be:
<div class="grid--full grid--table">
<div class="grid__item large--one-half"></div>
<div class="grid__item large--one-half"></div>
</div>
I'm not sure how i would do this, as with using the "one-quarter" this works well on a desktop screen, but on a mobile it squeezes everything into separate lines and I need to show this on one line.
Hope that makes sense, if somebody could please advise would really appreciate it.