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.
Related
I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
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 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
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.