All Questions
Tagged with grid-layout twitter-bootstrap
167
questions
81
votes
1
answer
60k
views
Half columns in Twitter Bootstrap 3
I couldn't figure out how to make the bootstrap column like this:
col 3 | col 4.5 | col 4.5
- 1,103
69
votes
9
answers
63k
views
Why is the Bootstrap grid layout preferable to an HTML table?
[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different ...
- 50k
55
votes
7
answers
203k
views
How can I make Bootstrap 4 columns have a height of 100%?
how can I make a column take up 100% height of the browser w bootstrap 4?
See the following: https://codepen.io/johnpickly/pen/dRqxjV
Note the yellow div, I need this div/column to take up a height ...
- 2,240
37
votes
6
answers
38k
views
Change the order of col-*-12 columns in Bootstrap using push/pull
I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
I have read that ...
- 13.8k
33
votes
3
answers
112k
views
min-width for column in Bootstrap grid system [duplicate]
I have following HTML with Bootstrap CSS.
<div class="row">
<div class="col-sm-4" style="min-width: 66px;">Name</div>
<div class="col-sm-1" style="min-width: 120px;">...
- 1,995
25
votes
3
answers
13k
views
Bootstrap 3 grid, does it *really* matter how many columns are in a row?
I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.
I have it ...
- 3,998
20
votes
4
answers
35k
views
More than 12 bootstrap columns with a horizontal scroll
I am trying to make a table using bootstrap grid system. I know that we should use only 12 columns per row. But I wanted to have more than 12 columns with a horizontal scroll for the entire table. So ...
- 1,302
12
votes
1
answer
25k
views
Single full-width column in row with twitter bootstrap grid
When using bootstrap's grid, what is the best way to markup a single full-width column in a row?
Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > ....
- 257k
11
votes
6
answers
34k
views
Pushing and Pulling Columns - Bootstrap 4
This is what I need:
Desktop: B A
Mobile:
A
B
Here is my HTML:
<div class="row">
<div class="col-md-7 col-sm-7 push-md-5">
A
</div>
<div class="col-md-...
- 1,184
9
votes
4
answers
28k
views
Create a user-defined gap between two Bootstrap columns
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| ...
- 345
7
votes
1
answer
19k
views
Responsive Grid of Squares in Bootstrap
I want to create a grid of responsive images that are always squared in Bootstrap.
So far I got this: Jsfiddle Link
This part forces the elements to be squared all the time:
.frontpage_square {
...
- 137
6
votes
7
answers
13k
views
How to determine which grid option is currently used
I use Bootstrap 3 for a web page that is created using PHP and HTML.
With the responsive grid and classes on Bootstrap 3 you can assign multiple classes to a div to define different widths depending ...
- 11.3k
6
votes
1
answer
8k
views
Twitter Bootstrap grid not working as expected
I'm using a premium Wordpress theme based on Twitter's Bootstrap. The theme is called StrapPress.
I'm just getting going with the grid and trying to set things up in a very basic way, but the grid is ...
- 1,341
5
votes
2
answers
7k
views
Achieving a complex grid in bootstrap
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for ...
- 211
5
votes
1
answer
4k
views
spans adding up to parent in bootstrap not working if in well
<div class="row">
<div class="span8">
<div class="well well-large">
<h3>Place an Order</h3>
<div class="row">
&...
- 42.2k
5
votes
1
answer
12k
views
Bootstrap Column Wrapping - Irregular Behavior
I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
...
- 455
5
votes
2
answers
3k
views
3-column full screen app layout in Bootstrap 3
I'm creating an admin dashboard for an app, where I need a layout like this:
---------------------------------------------------------------------------------
| ...
- 1,500
5
votes
3
answers
3k
views
Twitter bootstrap grid: is it possible to simulate smaller screen by adding class to container?
Does Twitter Bootstrap 3 provide a built-in way to "simulate" a smaller screen by adding a css class to grid container?
My use case is that I want to display an section of html using bootstrap's ...
- 1,709
4
votes
3
answers
6k
views
Bootstrap layout on lower resolution
I have the following code:
<div class="row">
<div class="col-sm-2">
<input style="width:100%" >
</div>
</div>
And Fiddle:
Sample
On my default resolution: ...
- 4,725
4
votes
2
answers
11k
views
In Bootstrap how to get two rows with different dimensions beneath each other
I'm using Bootstrap 3. I have two rows. The first row has 4x3 columns. The second row has one column of 3 and one column of 9. The column of 9 has twice the height of all the other columns. I would ...
- 478
4
votes
1
answer
4k
views
Grid columns spanning full width inside Bootstrap 3 tab-pane
I can't seem to get this to work - my columns go full width.
Here's a JSfiddle for direct use
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body"&...
- 21.1k
4
votes
1
answer
4k
views
How to reorder bootstrap columns vertically
I'm trying to build the following layout in Bootstrap v3:
| Small | Large |
|--------------|--------------------|
| [A ] | [A ][B ] |
| [A.1 ] | [A.1 ...
- 34.2k
4
votes
2
answers
2k
views
Nested rows in Bootstrap 3 fail to respect the grid?
Bootstrap seems to break its own grid once you get into nested rows. This is a good example:
div {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/...
- 1,077
3
votes
1
answer
4k
views
Twitter Bootstrap 3 - Swap columns on extra-small devices [duplicate]
I have two columns in Twitter bootstrap, they look like this:
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
<div ...
- 852
3
votes
4
answers
2k
views
Bootstrap: Is it OK to assign column classes to heading tags
Is it OK to do this?
<div class="row">
<h3 class="col-md-12"> ... </h3>
<div class="col-md-6"> ... </div>
<div class="col-md-6"> ... </div>
</...
- 1,044
3
votes
2
answers
20k
views
Bootstrap multiple rows of spans in a row-fluid
This question is very similar, although it doesn't answer my question.
An answer like this would be fine, as long as it works for responsive layouts e.g. .row-fluid, which it doesn't at the moment.
...
- 1,697
3
votes
4
answers
3k
views
Bootstrap Grid System new line does not look nice
Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as follows:
<div class="row"&...
- 7,648
3
votes
1
answer
1k
views
How to make form labels (almost) never line break?
I would like my form labels to be left-aligned to the input fields, which I have achieved with this HTML:
<fieldset>
<div class="form-group row">
<label class="col-auto col-...
- 4,772
3
votes
2
answers
1k
views
Bootstrap grid with different image heights
I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here ...
user5520186
3
votes
2
answers
2k
views
Bootstrap - Place banner outside main container.
I have worked with a website in a few months and now come to an issue where the client wants an ad "outside" the main container and i use Bootstrap standard grid.
Because the page is centered and ...
- 53
3
votes
1
answer
942
views
Using the Umbraco v7.2.1 Grid Layout in a Webforms project
I have a website built using Umbraco v7.2.1 (recently upgraded from 6) and I am trying to use the new "Simple editor" which uses the bootstrap grid layout to allow users to dynamically add columns and ...
- 279
2
votes
1
answer
2k
views
Bootstrap3 is it valid for 1 row to have infinity columns?
Using Bootstrap3 and the grid system. The default settings are 12 columns in the grid system.
Is there any adverse outcomes to writing html similar to:
<div class="row">
<div class="col-...
- 32.8k
2
votes
2
answers
123
views
Keep one column at upper right of grid for all breakpoints
I've been using the grid system in Twitter Bootstrap on several projects - but can't seem to crack this nut.
I want to place a blue promotion cell in the upper right corner of the grid like this:
...
- 2,833
2
votes
1
answer
2k
views
Bootstrap 3 grid in less vs in html
What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.
Using bootstrap classes in html and bootstrap.css (which seems to be ...
- 335
2
votes
2
answers
2k
views
Twitter Bootstrap Fluid Grid system nesting not aligning with previous rows
I'm creating a form that uses Twitter Bootstrap's Fluid Grid system. A picture is worth a thousand words!
In the 3rd row (Paciente) there's some nesting going on. As you can see this nesting is ...
- 101k
2
votes
2
answers
166
views
Pushing a column to another row
So here's what I have in a LG design.
+-----+-----+
| A | B |
+-----+-----+
| C | D |
+-----+-----+
I want to reorder it in a MD design to look like this:
+---------+...
- 187
2
votes
1
answer
1k
views
How to use Twitter bootstrap grid layout in rmarkdown?
I am planning to use rmarkdown to render html pages with R generated content for publishing on websites. The ultimate goal is to render some kind of dashboard like pages (example pages). I know ...
- 8,297
2
votes
2
answers
130
views
How to add min height for particular grid
Im using 3 same grids with expanding text buttons and buttons are formatting different places because they have different amount text before the buttons. So my queston would be how to add specific ...
- 41
2
votes
1
answer
1k
views
bootstrap grid equal column width
I have a simple two column key-value grid that spans a set of rows
..
<div class="row">
<div class="col-md-auto">KEY</div>
<div class="col">VALUE</div>
</div>
....
- 591
2
votes
1
answer
192
views
Bootstrap - create 100 columns grid that marry the shape of a circle
I have a container that have the shape of a circle. I would like to create a grid with 100 columns inside it. I would like to have a function that would create that grid with a shape that will marry ...
- 7,472
2
votes
1
answer
4k
views
Bootstrap grid - columns first?
I'm fairly new to Bootstrap and have come across a problematic task that I first thought would be pretty simple. And maybe it is for someone with sufficient experience of Bootstrap.
If I have a row ...
- 307
2
votes
1
answer
3k
views
Twitter-Bootstrap 3 Grid Layout Overlapping
I'm playing around with the new Bootstrap 3.0
Here's what I almost want :
http://bootply.com/vincentmorneau/79018
The last panel should be col-xs-12 so it takes 100% width. Then I'd have my panels ...
2
votes
1
answer
844
views
How do I insure I am setting up the grid system properly in Bootstrap?
I have just started using Bootstrap (I have never used a grid system before) and am having a problem understanding the proper way of implementing the fluid grid system. I am a little worried that I ...
- 355
2
votes
1
answer
2k
views
Bootstrap responsive grid layout
This is my Markup which is coded using twitter bootstrap fluid layout
<div class="row-fluid">
<div class="span4">Col4</div>
<div class="span8">Col8</div>
</div>...
2
votes
1
answer
2k
views
Remove gutter from Bootstrap 4 grid
With Bootstrap 4, I have been asked to customise the default grid system for desktop like this:
wherein, the container & desktop breakpoint is 1280px.
The example I have tried is :
...
- 3,353
2
votes
1
answer
3k
views
how to set up a bootstrap 4 three column grid with fixed percentages
I have a fairly normal Bootstrap 4 grid, dividing a row into 3 columns with equal width:
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-...
- 774
2
votes
2
answers
6k
views
Safari and Bootstrap 4 - automatic grid breaks
This bootstrap 4 code
<div class="container-fluid">
<div class="row">
<div class="col"><small>Some text here</small></div>
<div class="col"&...
- 1,108
2
votes
1
answer
2k
views
How can I make tables respect the grid in Bootstrap 3?
Bootstrap tables do not respect the grid even if they have col-xs-X classes defined.
Here's a minimal example that shows how the (red) table doesn't line up with the (gray) grid: http://jsfiddle.net/...
- 1,077
2
votes
1
answer
76
views
Confused by bootstraps grid system, attempting to display everything as multiple rows of one centered column
I am trying to build a layout where all my content is displayed as one vertical column with each row having the exact same width (80% of the screen is my desired width).
However for some reason some ...
- 161
2
votes
1
answer
2k
views
Boostrap Grid - Removing vertical empty space [duplicate]
My current layout looks like this:
<div class="container">
<div class="row">
<div class="col-md-8">1. Lorem</div>
<div class="col-md-4">2. ...
- 1,379