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.
Related
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.
This question already has answers here:
Where to place bootstrap row class
(4 answers)
Closed 4 years ago.
Let's say I have to nest three bootstrap col classes and the last one will be col-md-12 so it goes 100%. My question is, Is that ok to nest col-md-12 in one row like first example or do I need to create another row for col-md-12 ?
Eg 1
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-12">
3
</div>
</div>
or
Eg 2
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
</div>
<div class="row">
<div class="col-md-12">
3
</div>
</div>
It is absolutely fine to have more columns in a row than will fit in it. They will wrap.
What's more, this is essential to Bootstrap's approach to responsive design.
You might have something like:
<div class="row">
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
<div class="col-sm-6 col-lg-3">…</div>
</div>
For a 4x1 layout on a large window and a 2x2 layout on a small window.
If you had to add a new .row container for each row, this would be impossible.
if you need the contents to be in the same Row then you can follow your example 1,
else you may proceed to following example 2 of your post.
Both are correct,depends on your requirement which one you want to use.
First example will put your columns inside same row but second example will create a seperate row for your col-md-12
Hope that helps
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I've been using Bootstrap for some time now, structuring my HTML elements without really knowing if I'm doing it in a right way. It works but I would like to know if there is a better way of doing it.
Lets take this template for instance:
What I do first is that I try to divide the page into smaller pieces. In this case I would start by dividing the left and right column, giving the left column 4 and the right one 8 "columns". I would write and position the HTML/class attributes like this:
...
<div class="row">
<div class="col-md-4">
<div id="upperLeftCol" class="col-md-12"> ... </div>
<div id="lowerLeftCol" class="col-md-12">
<div id="uniqueId1" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
<div id="uniqueId2" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
</div>
</div>
<div class="col-md-8">
.......
</div
</div>
Well you get the picture. I try to divide each subsection as an own div and give it the col-md-12 class attribute since I've noticed it aligns best with the other div that has the same class annotation.
I'm sure there is a more correct way to do this. What is the "best" approach? Also when should I create a new "row"?
I prefer to use more rows:
<div class="row">
<div class="col-md-4">
<div class="row">
<div id="upperLeftCol" class="col-md-12"> ... </div>
The code is better to understanding for others persons and avoid some design errors when you are using dynamic cells.