I need to implement the following custom widths for a website I am creating but not clear on how to do this to override the bootstrap defaults:
width of website: 1590px;
container width: 1530px;
column gutters: 30px;
column widths: 230px;
I know that you should not touch the bootstrap default css file, so if I create a custom.css file, what do I put it in it?
I dont know LESS/SASS though.
First I recommand not to use a fixed width in pixels for the container, because then you loose responsive behavior. Use a percentage value instead (default is 100%), define a max-width: 1590px; for container and use a padding: 0 30px; for the left and right spacing.
In Bootstrap all columns use percentage values, too. A column of 230px width you get by using the col classes for 1/6 ( see more here: http://getbootstrap.com/css/#grid-options)
And the gutter-width of 30px is the Bootstrap default gutter-width, 15px left & right.
Rule number one with bootstrap is to never change Something on the files ^^ so if you Want Something like that, the best is to create another CSS file, copy bootstrap on it and make some modification
Simply override the existing bootstrap's class in your custom CSS.
For eg:
CSS:
.container {
width: 1530px;
}
Similarly, other classes can have new values of the existing properties of Bootstrap.
Related
I would like to use bootstrap 4 margin and padding properties with pixels instead of rems. For example, I would like the following div to have margin-left of 20 pixels:
<div class="container ml-20">Hi</div>
Is it even possible?
Thanks in advance.
Bootstrap doesn't have anything like this. However, you can create a custom css class to handle this for you:
.ml-20 {
margin-left: 20px;
}
Your options are limitless with how you want to set it up. You could create ml-10, ml-100 or anything you want.
There's nothing like that in Bootstrap, but in CSS, just use the code
div {
margin-left:20px;
}
I have a WordPress website with a custom post type that I need to display in a Bootstrap grid.
Here's what I mean :
I need to create a gutter in the center, but obviously if I add a padding-left, it moves every element. I only need to add padding to the item on the right. Since the content is dynamic, I can't just add a class and type
.right-elements { padding-left: 10px; }
Is there a CSS property for even elements or something ?
( since the issue is not really unique I don't feel like I should add the code, but tell me if you need it )
Thanks !
If you're only interested in modifying even elements, you can use the :nth-child() rule:
.my-class:nth-child(even) { padding-left: 10px; }
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
I want to make same spacing between all pictures. Their width would be the same only height differs. It should look like in the picture. example: http://prntscr.com/2ugt3z
That kind of layout cannot be done using only floats, your options are:
Use Flex layout (ie10+)
Position each element manually
Use a plugin, if you are using jquery then Isotope (http://isotope.metafizzy.co/) or Masonry (http://masonry.desandro.com/) are what you need, if you're using pure javascript, Salvattore (http://salvattore.com/) will do the trick.
do you mean something like, this will place margin of 5px on every image tag inside #content:
#content img{
margin: 5px;
}
or make:
.image-margin{
margin: 5px;
}
and do something like:
or: http://isotope.metafizzy.co/
I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:
I would like to assign unique gutter widths to specific rows in my layout.
The rest of the website will make use of the underlying gutter width.
Is it possible? Any help would be much appreciated. Thanks in Advance / Trev
The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..
.row .col:not(:first-child),.row .col:not(:last-child) {
padding-right:5px;
padding-left:5px;
}
Demo: http://bootply.com/94849
Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:
.my-personalized-row {
margin-bottom: 5px !important; //If you want 5px of gutter width.
}
Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.
UPDATE:
I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.