I am beginner in twitter bootstrap My question is simple can i use my custom CSS in bootstrap also, is it a correct way or i have to use only bootstrap classes Like i am facing margin padding issues
For Example
i used the .container-fluid class now i want to use .wrap class of mine
.wrap{
width:1249px;
margin:0px auto;
}
then i used the .row and .col in it suppose the first col is col-sm-4 how and in .col-sm-4 i use h1 heading it need margin from left
the actual question is, Is it a correct way of using own classes when we need?
is it make any difference? the responsiveness will remain the same? Thanks in advance
Yes you can use your own class also along with bootstrap 3.However it might affect the responsiveness of your page, since you are fixing the width. So, if the page becomes less than 1249px, it will show a horizontal scroll.
Related
EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/
I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.
Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.
Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).
What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?
Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
#media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
Im making a page with bootstrap 2 due to job requirements and facing the following challenge, please understand Im learning it ;)
I have one #mainDiv below a div with my namespace for bootstrap .bootstrapDiv
Below that I have one .row-fluid, under them 2 .span12, here is my problem;
I need to be able to put together with margin-right:0 first one and margin-left:0 second one, these two divs should fill the row respecting the general layout of the rest of rows.
How I see them is ok in the left but at right is missing this gutter width and doesnt looks nice at all, is there any special class that expands the row and its contents horizontally if you take out the iner horizontal margins of the elements in it?
How should you solve this problem normally?
EDIT
Here is my fiddle:
http://jsfiddle.net/qdb74/
im refering to the black space
I usually solve problems like this by creating my own CSS or extending Bootstrap. That is because Bootstrap doesn't have an option to modify the gutter for .row-fluid. Here is an example on how to extend Bootstrap:
.row-fluid [class*="span"].no-gutter {
margin: 0;
}
.row-fluid .span6.no-gutter {
width: 50%;
}
.row-fluid .span5.no-gutter {
width: 41.666666666666666%
}
...
And you can decorate your element like this:
<div class="firstDiv span6 no-gutter"></div>
However if you decide to extend Bootstrap and a new version of the framework comes out this might break. If that is a concern it might be better to create your own fluid grid without gutters. That option will require you to write a bit more CSS than this.
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/
I know the chances are slim, but how would you achieve layouts like the following, where left, center and right have different background colors while using the bootstrap grid system? I guess the column layout is against the thinking of the Bootstrap grid, am I right?
Here's an online use case url.
The CSS is the standard Bootstrap grid CSS for spans etc..
I had a look on some other SO Q and A's but I wouldn't like to use things like JavaScript.. or things not supported by IE7+..
The solution from #Omega looks good, here's another option: http://jsfiddle.net/panchroma/u5XGL/
The important bit of the CSS here is how to get the background colours for columns with varying content height.
I've added a large padding and an equally large negative margin to each column, then wrapped the entire row in in a class with overflow hidden.
CSS
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
You will find that it resoponds well and is also a good cross-browser solution.
Good luck!
Sure, just use this CSS:
html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}
http://dabblet.com/gist/5326320
I'm trying to accomplish a layout similar to this one:
http://dribbble.com/shots/829195-Slate/attachments/86422
My project uses Twitter Bootstrap with responsive design. It is possible to implement a full width layout with Bootstrap?
The issue is that from what I've been reading fluid layouts will be removed in bootstrap 3.0, and the responsive design has fixed widths.
You'll find a great tutorial here: bootstrap-3-grid-introduction and answer for your question is <div class="container-fluid"> ... </div>
Because the accepted answer isn't on the same planet as BS3, I'll share what I'm using to achieve nearly full-width capabilities.
First off, this is cheating. It's not really fluid width - but it appears to be - depending on the size of the screen viewing the site.
The problem with BS3 and fluid width sites is that they have taken this "mobile first" approach, which requires that they define every freaking screen width up to what they consider to be desktop (1200px) I'm working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width.
They have defined 10 screen widths (really only 5, but anyway). I don't really feel comfortable changing those, because they are common widths. So, I chose to define some extra widths for BS to choose from when deciding the width of the container class.
The way I use BS is to take all of the Bootstrap provided LESS files, omit the variables.less file to provide my own, and add one of my own to the end to override the things I want to change. Within my less file, I add the following to achieve 2 common screen width settings:
#media screen and (min-width: 1600px) {
.container {
max-width: (1600px - #grid-gutter-width);
}
}
#media screen and (min-width: 1900px) {
.container {
max-width: (1900px - #grid-gutter-width);
}
}
These two settings set the example for what you need to do to achieve different screen widths. Here, you get full width at 1600px, and 1900px. Any less than 1600 - BS falls back to the 1200px width, then to 768px and so forth - down to phone size.
If you have larger to support, just create more #media screen statements like these. If you're building the CSS instead, you'll want to determine what gutter width was used and subtract it from your target screen width.
Update:
Bootstrap 3.0.1 and up (so far) - it's as easy as setting #container-large-desktop to 100%
Update:
Bootstrap 3 has been released since this question was originally answered in January, so if you are a BS3 user, please refer to the BS3 documentation. For those still on BS2, the original answer still applies. If you are interested in switching from 2 to 3, see the migration guide.
Original answer:
From the bootstrap 2 docs:
Make any row "fluid" by changing .row to .row-fluid. The column
classes stay the exact same, making it easy to flip between fixed and
fluid grids.
Code
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
This, in conjunction with setting the width of your container to a fluid value, should allow you to get your desired layout.
As of the latest Bootstrap (3.1.x), the way to achieve a fluid layout it to use .container-fluid class.
See Bootstrap grid for reference
Just create another class and add along with the bootstrap container class. You can also use container-fluid though.
<div class="container full-width">
<div class="row">
....
</div>
</div>
The CSS part is pretty simple
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
Hope this helps, Thanks!
*{
margin:0
padding:0
}
make sure your container's width:%100
In Bootstrap 3, columns are specified using percentages. (In Bootstrap 2, this was only the case if a column/span was within a .row-fluid element, but that's no longer necessary and that class no longer exists.) If you use a .container, then #Michael is absolutely right that you'll be stuck with a fixed-width layout. However, you should be in good shape if you just avoid using a .container element.
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
The margin for the body is already 0, so you should be able to get up right to the edge. (Columns still have a 15px padding on both sides, so you may have to account for that in your design, but this shouldn't stop you, and you can always customize this when you download Bootstrap.)
Here is an example of a 100% width, 100% height layout with Bootstrap 3.
http://bootply.com/tofficer/77686
The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this. You get again a container-fluid :
.container{
max-width:100%;
padding:0;
}
I think you could just use class "col-md-12" it has required left and right paddings and 100% width. Looks like this is a good replacement for container-fluid from 2nd bootstrap.