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
Related
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
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
//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 a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap. Is it even possible to transform Bootstrap into 15 cols layout? I havent seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.
But, this is it.
If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?
You can customize and download your own Bootstrap components by going to:
http://getbootstrap.com/customize/
and navigating down towards the "grid-columns"
Set your preferred number of columns and scroll to the bottom to click "Compile and Download".
I would generally recommend going with an even number of columns over odd however for easier math.
If you can run a customized version of Bootstrap, xengravity's answer is the way to go.
However, if you're using vanilla bootstrap (perhaps from a CDN or legacy code) you could create the desired effect with a little CSS tweaking and some nested rows/columns.
Start with a 3 column layout of col-xs-4, then fill those with a row and 5 col-xs-* (I chose 3 as it was close) and tweak the width with some CSS. For example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-3 fixed">1</div>
<div class="col-xs-3 fixed">2</div>
<div class="col-xs-3 fixed">3</div>
<div class="col-xs-3 fixed">4</div>
<div class="col-xs-3 fixed">5</div>
</div>
</div>
. . .
</div>
</div>
and the CSS:
.col-xs-3.fixed {
width:20%;
}
For an interactive example, see this fiddle.
A cleaner way to go would be to include the CSS/LESS from the col-xs-3 and just make a fixed-col or similar class.
Update
The funkiness with the columns wrapping/spacing as mentioned in the comments is due to the columns' default padding making it too large for the row and wrapping. As seen in this updated fiddle removing the padding for the .fixed columns fixes it. This may not be desirable, and as such tweaks will need to be made for your specific application.
I was able to make the navbar collapse sooner using the CSS code from http://www.bootply.com/120604
How do I make the grid collapse or stack into 1 column sooner?
I only have two columns: col-sm-3 and col-sm-9. The responsive design works fine on mobile, but I would like to achieve the same behavior on tablets (768px to 991px).
I have to use Bootstrap CDN, so my only option is to override the default using CSS. Thanks.
No need to override the css, just use md in your col-*-# classes instead of sm. i.e.
<div class="col-md-3">Stuff</div>
<div class="col-md-9">More Stuff</div>
Then go to the bar, because you're done!