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!
Related
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 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 want to have 2 buttons groups in one row like this:
[a|b|c] [d|e|f|g|h]
Currently the right button group is a pull-right bootstrap class. Works fine.
But this looks horrible on xs devices - since it's in a new row but still pulled to the right, like this:
[a|b|c]
[d|e|f|g|h]
So what I basically want to do is to combine pull- classes.
pull-right pull-left-xs
Well this example don't work. Is there something similiar? Otherwise: how can I align my content right on md and xl devices and left on all other devices?
Twitter bootstrap has helper classes that could work for what you are trying to do, try with offset .pull and .push classes, something like col-md-push-3 will push your 3 columns only for .md and .lg classes, if you want a different behavior on mobile just reset it to col-xs-push-0.
Check this link for reference http://getbootstrap.com/css/#grid-column-ordering
Why do you need a pull-right. Can't you get the same effect using offset. http://getbootstrap.com/css/#grid-offsetting
So for example you could have
<div class="row">
<div class="col-sm-3 col-xs-4">[a|b|c]</div>
<div class="col-sm-5 col-sm-offset-4 col-xs-8">[d|e|f|g|h]</div>
</div>
For sm screens it will have the offset spacing in between, then for xs it will put it next to each other.
You could use media query and custom class like this..
#media (min-width: 992px) {
.pull-right-sm {
float: right;
}
}
http://bootply.com/i145F3q1Ji
I would steer clear of modifying Bootstrap classes because it will potentially affect other parts of the site where you need the styles to work as originally intended. You will likely also be creating a maintainability challenge for yourself or others in the future. Furthermore, the push and offset does not right align, so it would only get close to what you want.
Bootstrap 4 includes responsive classes that use the same breakpoints as the grid system (e.g. .text-sm-right, .text-md-left etc) that can be used in conjunction with one another as a solution to this. https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
Old post but as it was the top answer in google for my search...
Using Bootstrap v4 you can use the float-* classes.
<div class="row">
<div class="col-md-6">
Always left aligned
</div>
<div class="col-md-6 float-md-right">
Right aligned for medium+, left aligned otherwise
</div>
</div>
https://getbootstrap.com/docs/4.1/utilities/float/#responsive
This may seem like a dumb question, but is there an official bootstrap class reference? I looked on the website and was unable to find one.
I'm looking though some of the examples and I'll see stuff like:
<div class="container-fluid">
How am I supposed to figure out what all the contain-fluid tag does? Am I expected to dig through the css for every class to look at the rules and then divine how it will affect my page? That seems like a quick way to make assumptions and run into problems later.
Is there an official reference somewhere that I'm missing? I've seen some class lists compiled by third parties, but it seems like those are always going to lag behind new changes and may contain assumptions of intensions.
Not official but current as of 2/2016 https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Printable pdf and a sortable table with descriptions to help sort through the list of classes.
http://www.tutorialspoint.com/bootstrap/bootstrap_quick_guide.htm contains a very good reference for many of the bootstrap layout and css components.
Bootstrap 3 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.
for example, to have a two-column fluid layout, simply use:
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.
You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..
"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."
More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide
Demo: http://bootply.com/91948
UPDATE for Bootstrap 3.1
container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382
I am doing 2 responsive rebuilds on a site using Zurb Foundation with CSS and another with SASS . I am having trouble with the columns not displaying side-by-side in the SASS version, they seem to be going full width for every screen size.
For the SASS rebuild, I have copied all my files into the new directory structure that was created by the command line. I assumed it would be a case of porting my old files, plugging everything back together, watch the sass folder in the command line, output app.css and it would work. Everything has carried across fine except for the columns for some reason.
Correct CSS Version: http://enigmaweb.co.uk/creditlook/responsive-redesign/css/index.html
Broken SASS Version: http://enigmaweb.co.uk/creditlook/responsive-redesign/sass/index.html
The CSS version is exactly how I would like the site to look - does anyone have any suggestions at all?
Thanks in advance for the help.
Its hard to say exactly whats going on without looking at your SASS, but you do not have medium-4 defined in your app.css. You do have small-12 and large-4 classes defined. Once you get the medium-# classes defined your code should work fine.
agconti's answer does fix the issue, but remember "Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary". Once you get the medium-# classes defined you should be good to go. There shouldn't be a reason to add large-#, xlarge-#, or xxlarge-# as long as you want them to look like medium-#.
I hope that helps.
Your only specifying the small (iphone) and medium (tablet) views, but your viewing it from a large (desktop) view.
Add large-4 to your columns to make them work in the desktop view like so:
<div class="small-12 medium-4 large-4 columns">
<h2>Creditlook Lite</h2>
<div class="sprite icon1"> </div>
<p>Free entry-level, self-managed service to get you started.</p>
</div>
Then your div's will respond like your photo.