I have created a grid at bootstrap but when I do not have enough cards to fill the page they get spaced vertically. I want them to be grouped with a fix gap between them.
Find image's url attached.
Just check how to work grid in browser
https://getbootstrap.com/docs/3.3/examples/grid/
and use like
<div class="container">
...
</div>
<div class="row">
...
</div>
Related
I'm trying to use flexbox to create dynamic templates where I would mix elements in horizontal and vertical directions without creating wrappers for each group.
I have for example this kind of structure:
<div id="wrapper">
<div id="zone1">
zone1
</div>
<div id="zone2">
zone2
</div>
<div id="zone3">
zone3
</div>
<div id="zone4">
zone4
</div>
<div id="zone5">
zone5
</div>
The wrapper would use display:flex and each children would be set at 100% for mobile screens like this:
My fiddle here: https://jsfiddle.net/laurentw/2myL6h45/2/
Now when the screen goes bigger, I'd like to do this
If I keep the divs as individual divs, I'm running into trouble because I have two different directions:
Fiddle example: https://jsfiddle.net/laurentw/wogmdxL5/4/
And then finally for much bigger screens:
I would like to keep all those divs separated so that I can try out multiple templates without altering the code. I want to influence the order (easy) but I would also like to control the direction and occupied space.
Is that something I can achieve with Flexbox without any additional JS?
Thanks
Is it possible to remove the middle two breakpoints in Bootstrap 3 and have the browser visually "scale/shrink" the page, so in those breakpoints you don't have to scroll left or right to see the page?
Basically, I have a design that I want to be responsive, but only be responsive for the small breakpoint and the large breakpoint, but I don't want a viewer to have to scroll left or right to see all the content.
Here is an example that I'm working on that doesn't work. I've tested on the iPad and I have to scroll around left and right to see the content:
http://matthewtbrown.com/test/myprojects.html
Just checked your code via Developer Tools, you're using container-fluid for the parent container.
When using container-fluid you should use row-fluid instead of row.
We use row when using container and row-fluid when using container-fluid.
It should be something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>
I am a newbie, trying to create a simple grid layout using jquery mobile version 1.4.5 learning from jquerymobile demo . Either it is 2 or more column grid layout, last div element never align vertically with others unless it's width is reduced. Here is my 2 column grid layout code
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div>
<div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
http://jsfiddle.net/j43xh6k3/ . The second div will align vertically after resizing it's size to around 40% from 50%. This problem exist also with more than 2 column grid layout. After searching stackoverflow I came across this http://jsfiddle.net/Ltx2md34/1/ , which uses jquery mobile version 1.4.2. and is what I want to achieve. So, I tried changing version of Jquery mobile in my code but the problem didn't solve.Please help me understand where I have done wrong *Sorry for my bad English
I got rid of the problem by removing the white space and carriage return between the two enclosed divs:
First I did this:
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div><div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
And then re-indented back to:
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div>
<div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
Maybe there's a hidden character in their somewhere messing things up.
I want to change the default behaviour of the bootstrap grid system. I'm using the following lines of codes to display two columns in my page:
<div class="col-md-8" id="one">
...
</div>
<div class="col-md-4" id="two">
...
</div>
When the screen size is too small to display both columns next to each other bootstrap positions the div one above div two. I want to invert this behaviour so that it positions div two above div one. However if it is enough space for both columns the default behaviour should stay the same.
Change the order of the <div>'s such that two comes first to make the order on the small screen correct. Then use col-md-push-8 and col-md-pull-4 to push and pull the two and one columns into the correct order on larger screens.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 col-md-push-8">two</div>
<div class="col-md-8 col-md-pull-4">one</div>
See http://getbootstrap.com/css/#grid-column-ordering for some background information on column ordering