This question already has answers here:
Bootstrap 4 how to have margin between columns without going over space
(2 answers)
Closed 4 years ago.
I'm sure I'm missing something obvious but I can't add a right margin to separate these div elements without causing the second to move to a new line.
https://codepen.io/jvern22/pen/GwQpgZ
I have 2 row's with 4 col's in this format;
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
I haven't set the elements to block or inline
I'm missing something.
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
Related
This question already has answers here:
Bootstrap row with columns of different height
(3 answers)
Closed 5 years ago.
I'm using the Bootstrap grid to display a page of products which are dinamically added to it. Each product has a col-md-3 class and there are 4 products per row. The problem is that when the row is full and a new product is added (hence having to start a new row), the product does not get placed at the beginning of the new row, but somewhere else (either second or third position). You can [see here a screenshot][1] showing the problem.
<div class= "row">
<div class="col-xs-6 col-md-3">
<a href="/collections/summer-collection/products/another-skirt" class="grid__image">
<div class="my-reveal">
<img src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt">
<img class="hidden" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0353_123483_large.jpg?v=1486835408" alt="Another Skirt">
</div>
</a>
<p class="h4 front-title">
Another Skirt
</p>
<p>
<span class="visually-hidden">Regular price</span>
<br><s>440,00 lei</s>
</p>
</div>
</div>
The image in the 2nd column keeps stacking below the first column and not on the right side of the page. Ive been staring at this for two hours now. I'm using codepen so I have bootstrap preloaded in the background.
http://codepen.io/OfeyDofey/pen/KaLjeG/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>George Washington</h3><br>
<h3>Montana State Quarter</h3><br>
<h3>Ohio State Quarter</h3><br>
</div>
<div class="col-md-12">
<img src="http://i.imgur.com/YzO3IvA.jpg" class="QC">
</div>
</div>
</div>
</div>
You need to change col-md-12 to col-md-6.
Bootstrap grid works on 12 columns.
Found two bugs.
Grid system is 12 col wide, currently in your code it is 24 cols wide, use -6 instead of -12.
Add 'display:inline;' property to your 'h3{ }' in order to display them inline.
This is probably an easy one, but I'm new to bootstrap and aren't quite familiar with how it works. I have the following code to create 4 even-width columns in a row. But it keeps showing up as 4 vertically stacked columns on my laptop (1920x1080) and I'm not quite sure where I'm doing it wrong.
<div class="container">
<div class="row-fluid">
<div class="col-md-3"><!--about us feature 1st -->
<div class="about-block">
<div class="heading">
<h6>AVAILABILITY</h6>
<p>Fast Response Time<br> 15 Minutes Setup</p>
</div>
</div>
</div><!--about us feature 1st closed -->
<div class="col-md-3"><!--about us feature 2nd -->
<div class="about-block">
<div class="heading">
<h6>SPEED</h6>
<p>Average 7x Faster<br> Complete Data Coverage</p>
</div>
</div>
</div> <!--about us feature 2nd closed -->
<div class="col-md-3"><!--about us feature 3rd -->
<div class="about-block">
<div class="heading">
<h6>SAFETY</h6>
<p>Reduce Human Risk<br> No Scaffolding</p>
</div>
</div>
</div><!--about us feature 3rd closed -->
<div class="col-md-3"><!--about us feature 4th -->
<div class="about-block">
<div class="heading">
<h6>COST SAVINGS</h6>
<p>Targeted Repairs<br> Less Outage Time</p>
</div>
</div>
</div><!--about us feature 4th closed -->
</div>
</div>
UPDATE Added screenshot:
Use col-sm-3 instead, or make your <div> element wider. If you are using a container directly inside body, you shouldn't have any problem. If you are using inside another element, make sure it is wide enough.
First, try changing row-fluid class to style="float: left". Second, it is true that (in theory) the screen is divided into 12, but 3*4 might be more than 12 (margin, border, etc.). If the first part renders three columns and the 4th underneath, try reducing the size of the columns by setting, for instance, width=24%.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi I hope someone can help me. I am relatively new to Bootstrap and I can get my head around the column layouts and how they work. However I've come to a problem when I want to create different columns at different heights.
I am trying to achieve the following layout:
The issue I have is trying to get tab3 in that position, I need it stacked below tab2. I managed to sort out tab5 and 6 by adding in a margin as labelled but thought this would be too messy for tab3.
bootply (thanks #Gorostas)
With regards to the grid system of bootstrap you can always make columns inside other columns.
Ill just show the top half since you have done the bottom half.
<div class ="container">
<div class ="row"> <!--Use a Row to keeps columns on the same line for the top half-->
<div class="col-md-8"> <!--Tab 1-->
</div>
<div class="col-md-2"> <!--Space for Tab 2 and 3-->
<div class="row"> <!--Row is not necassery when using 12 but I use them for smaller columns viewed on a smaller viewport-->
<!-- "col-md12" make use of all spacing of the grid that is available within the parent-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 2-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 3-->
</div>
</div>
<div class="col-md-2">
</div> <!--Tab 4-->
</div>
<div class="row">
<!-- Bottom half of tabs-->
</div>
</div>
http://www.bootply.com/wG58MwAews
If you are using the default Bootstrap 3 your grid will be 12 blocks horizontal. If you make a new col in a col it will break that column into 12 and position it relative to the grid system, http://getbootstrap.com/examples/grid/, you can break it down into another 12 blocks like in my example.Comment if you want a more detailed explanation, but this should do the job.
This question already has answers here:
Changing number of columns dynamically in Bootstrap grids
(2 answers)
Closed 9 years ago.
When using Bootstrap's fluid grid, is it necessary to declare a column when you want the content to span the entire width of the row. In other words, is this sufficient
<div class="row-fluid">
This column should span the full width of the row
</div>
Or is it really necessary to do this (as the docs suggest):
<div class="row-fluid">
<div class="span12">This column should span the full width of the row</div>
</div>
Also, when I want to nest columns in a fluid grid, according to the docs
Nesting with fluid grids is a bit different [to a non-fluid grid]: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.
The docs then go on to give this example where the first row is one full-width column and the second row has 2 half-width columns
<div class="row-fluid">
<div class="span12">Fluid 12
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
Apart from the class name of the rows, I don't see how this is at all different to a non-fluid grid. Also, this example seems to contradict the statement
the number of nested columns should not match the parent's number of columns
Because last time I checked 6 + 6 = 12. Can someone improve on this explanation?
(1) I don't see how this is at all different to a non-fluid grid
It uses percentages
(2) the number of nested columns should not match the parent's number of columns
Well, bad example, what they simply mean is that the number in the class names should always add up to 12, regardless of what they are nested in.
This is correct:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span4"> </div>
<div class="span4"> </div>
<div class="span4"> </div>
</div>
</div>
instead of this, which is wrong:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span2"> </div>
<div class="span2"> </div>
<div class="span2"> </div>
</div>
</div>