All Questions
Tagged with grid-layout twitter-bootstrap-3
71
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
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
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
10
votes
3
answers
18k
views
Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units?
I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.
The docs for Grid Options say that all of the grid systems use 12 columns.
If you take a look at ...
- 103
9
votes
3
answers
14k
views
Huge whitespace around plotly chart in bootstrap grid
I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.
I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured ...
- 5,196
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
2
answers
21k
views
How to increase padding between columns using Bootstrap 3.0
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-...
- 2,723
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
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
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
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
2
answers
6k
views
How to remove vertical space between divs in Bootstrap 3 grid layout?
My Bootstrap 3 grid layout renders as follows:
However, I don't want the space between the 1st div (yellow) and the 3rd div (red).
Here's my code:
<div class='row'>
<div class="col-xs-...
- 118
3
votes
1
answer
65
views
How to use Lesser divs with bootstrap
using bootstrap 3.3.7
The structure wanted is found in the link below. The problem is to solve this kind of a grid system by using lesser divs as much as possible.
First, we have a div with a class ...
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
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
3
answers
2k
views
N-by-2 grid, and if the last row has only a single column, center it
I want to have an N-by-2 grid like this, in which some elements (columns) might be set to display:none based on run-time factors, making the number of rows and columns unknown in advance at the design ...
- 33.9k
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
1
answer
472
views
Display loaded elements with different height (pagination) in grid layout
I have several items (elements) with different height but with the same width which I am arranging them with Bootstrap 3. At first, the first 9 of them are displayed in three columns (col-sm-4) and I ...
- 850
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
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
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
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
4
answers
1k
views
Bootstrap 3 ordering column into same row in responsive layout
I' m developing a responsive layout but I have problems to sort columns.
I can´t sort columns within a single row.
<div class="row">
<div class="well col-sm-8" style="background-color: red"&...
- 436
2
votes
2
answers
621
views
Tile Thumbnails in a Grid
I want to tile thumbnails into 3 columns using bootstrap's grid classes like this (this entry only has 3 images):
The 4th image would go to the next row <div class="row"></div> within a &...
- 767
2
votes
2
answers
1k
views
Can't apply bootstrap grid to layout
I'm trying to code the following layout using Bootstrap 3 - it's a subsection of a website with a grid of 10 (the other 2 are for the sidebar, which is not the problem here), the numbers represent how ...
- 31
2
votes
2
answers
1k
views
Bootstrap col-* [duplicate]
I have simple question - I have such code:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">...</div>
Do I need to use all cols, if they are the same or I can use only one of col-* ...
- 485
2
votes
2
answers
105
views
Bootstrap Grid Layout (Span Rows?)
I am working on a Boostrap v3 project that requires a responsive infographic style page.
I cannot figure out how to do this the way i need to. I have had limited success in spanning a single row but ...
- 43
1
vote
2
answers
4k
views
How can I add extra column classes in Bootstrap 3?
Bootstrap 3 changed the previous approach of span classes for the grid system for the more explicit col-xs, col-md, etc. An excellent improvement imo, but still I find that I would like to add extra ...
- 671
1
vote
2
answers
104
views
Bootstrap grid layout inserts a blank div when resized
I have a collection of pictures in a grid. I'm using "col-lg-4 col-md-6" to get it to go 3x3 pictures in large or 2x2 in medium. However a blank div gets inserted for my medium size layout.
Take a ...
- 2,196
1
vote
1
answer
97
views
Bootstrap grid layout issue - does not work as intended
All my items in the grid layout are set to the same height, but I still have this problem:
<!-- featured-box -->
<div class="featured-box">
<div class="col-md-4 col-sm-4 col-xs-...
- 56k
1
vote
1
answer
2k
views
Bootstrap - having one column in a row with horizontal scroll instead of wrapping onto the next line
I am trying to create page which is divided into 2 sections (using columns). In the left hand side column (first outer column) I want to have other columns nested inside (inner column x).
I am ...
- 13
1
vote
2
answers
4k
views
How to add padding to the extra small (xs) column only without affecting other sizes in bootstrap3
I am using bootsrap 3 like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<label class="control-label" for="destination">Destination</label>
...
- 15.9k
1
vote
2
answers
1k
views
bootstrap tumblr-like grid system
I'd like to have a tumblr-like grid layout for my bootstrap website. (example) The code below shows what I have right now using the grid system of bootstrap (my guess is that it is not designed to do ...
- 45
1
vote
1
answer
2k
views
Bootstrap 3 RC1: Column Ordering
I have two primary boxes: an 8-col wide box with a bunch of panels and a second, 4-col (offset-1) to the right as a sidebar.
I want to push the sidebar on top of the box o' sidebars on small screens. ...
- 23.7k
1
vote
1
answer
34
views
Incorrect positioning between LG and MD
Please take a look at https://mgumerov.github.io/jquery/test.html
(there will be some queries https->http, don't you be scared by it)
In a thumbnails view mode, each tile is declared with col-sm-4 ...
- 652
1
vote
1
answer
65
views
Complex column system with bootstrap 3.0
I would like to do this grid system for my project (see photo).
But I'm not sure it's possible, without duplicate the desktop view and just displaying the good one depending the platform.
I ...
- 1,047
1
vote
2
answers
116
views
Change Bootstrap grid to 16,67+66,67+20,67
I am using Bootstrap for having a better mobile design.
I am using this grid model:
.col-md-2 (navigation bar) .col-md-8 (content)- col-md-2 (right column)
with following width sizes:
16.66666667 % ...
- 80
1
vote
2
answers
2k
views
Create custom grid system width defined column widths
The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:
Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra ...
- 24.2k
1
vote
2
answers
3k
views
Grid columns do not fill parent container
I have a grid layout using Bootstrap 3, with rows containing varying numbers of columns. My expectation of the grid behaviour is that the margin between column items would change as the parent ...
- 11.3k
1
vote
1
answer
673
views
How Do You Anchor Multiple Child Elements to the Bottom of a Parent Element in a Responsive Design?
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data ...
- 15
1
vote
1
answer
38
views
Bootstrap row align issue
The images should align together so there is two images on one row and one on the row below. However all the images stack on top of eachother. I know that it is something to do with the nav bar as the ...
- 25
1
vote
1
answer
157
views
Embed Bootstrap 3 Based Grid System Only
I have an existing website which I need to add a grid based layout to only within the main content area and not in the nav bar or footer section. The problem I am encountering is that when I use the ...
- 1,657
1
vote
1
answer
1k
views
Combining fixed HTML with Umbraco 7 Grid content
I'm new to umbraco, and I've encountered the following problem.
I have a design with a fixed navigation box on the left. The right side is for content. This content needs to be filled with the new ...
- 833
0
votes
3
answers
112
views
Adding 1/4th to a Twitter Bootstrap column
I have three columns like this in a row:
<div class="col-lg-.5 side-nav"></div>
<div class="col-lg-8.25 canvas"></div>
<div class="col-lg-3.25 persistent"></div>'
...
- 5,400
0
votes
1
answer
763
views
Text exceeding grid in bootstrap3
As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.
<!DOCTYPE html&...
- 15.5k
0
votes
2
answers
582
views
Responsive Grid-layout: Img height scales different on smaller viewport sizes
I'm making a new site based on bootstrap: Link. The homepage contains a grid system with a lot of uneven columns. See picture below:
The problem ist that on different viewport width the height of the ...
- 73
0
votes
1
answer
764
views
How to Center Pricing Table in Bootstrap?
I'm using Bootstrap and a snippet for a responsive pricing table. Considering the following code how might I center my two pricing table items? I've tried using text-align (And all the other css ...
- 2,432