I have a Bootstrap 3 layout like this
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
Normally this displays the first column as 66% and the second column as 33%
When I have no content for the second column, I want to be able to hide it and make the first column take up 100% width. I think it can be done with a mixins but while I'm trying to get that working, is there a better way?
If it's empty you can add the class .col-md-12 after col-md-8 and add class .hide to the col-md-4. I don't know how you're implementing your site. If it's a CMS, you can have a little checkbox to add these classes if col-md-4 == empty.
If you're hiding at different breakpoints, look at the responsive utilities section of the TWB docs.
Related
I would really like to change the default display size for images on my products pages. My theme has them taking up half the page width and it just washes out the page. Is there an easy way to do this?
Also, any advice on if you think it is a good idea would be appreciated, it really annoys me but maybe it's just me!
My site is https://brantees.com/products/wheat-field-grain-creative-artistic-unisex-tee-shirt
First of all check if there's an option for that in the Customizer.
If not -- you'll have to go into the product template and edit it.
The div with the image is a column defined as
<div class="col-lg-6 col-md-6 col-sm-12 clearfix product--images">
col-lg-6 means it takes up 6 columns out of 12 on a large screen.
col-md-6 -- 6 out of 12 on a medium screen.
col-sm-12 -- 12 out 12 (the whole width) on a mobile screen.
You can change these numbers, but if you decrease numbers in the left columns -- increase them in the right if you want the two columns to take up 100% of the page width.
Never had this issue before. Go to this website. As you can see, "sss" and "sssss" are put in two divs with class "col-xs-*". They should appear on same row, not sure why it's not working.
your "menuDiv" has float: left and that ruins the flow
either remove that, or add a float to the "mainDiv" as well
as You are using XS-Xtra small , column type it will display as column on XS-devices for general use Use
<div class="col-7">your content
</div>
<div class="col-5">your content
</div>
I´m a Bootstrap guy, and find Semantic UI, i think it´s awesome. So i´m in the basic learning process, and most of all the GRID SYSTEM.
I read and experiment my own excercise with the grid, and find that works with 16 columns grid, columns size can be definied in the row:
<div class="ui grid">
<div class="five column row">
<div class="column">1</div>
...
</div>
... and in the column itself:
<div class="eight wide column"></div>
And learn about stackable and doubling columns, and learn that you can specify colums sizes for each three devices ( mobile, tablet, computer ).
<div class="six wide tablet eight wide computer column"></div>
My question is, since it´s a 16 columns based grid, it´s not divisible in 3 with equal values how do i get 3 columns in a specific device? Maybe this can be done with doubling but i need a solid solution, i mean, don´t depend in the other devices sizes.
In Bootstrap it would be as simple as ( example of small screen, 12 columns grid ):
<div class="col-sm-4">Content here</div>
Thanks!
Sebastián.
<div class="ui equal width three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
If I understand your question right this should work for you.
Grid Example - Semantic UI
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.