I looked around on the internet, but found no satisfying answer. I am new to using the Bootstrap 3 grid, which I enjoy a lot. However, for an animation on a page I am creating, I would like to shrink a row to some small width and while this animation plays, I want the Bootstrap grid to do its work on this div instead of on the entire viewport. Does anyone know a way to do this? I found the following suggestion by someone who was also wondering about this:
Bootstrap grid system responisve utility in resizable divs
However, I would prefer a CSS solution for this.
Related
I am trying to build a responsive carousel as present in Mecca website. I am using Bootstrap 4 and using slick plugin to build the carousel.
The look and feel i am trying to achieve is the something like this picture
As i am using boostrap 4, to build this tile, I have written the following code and codepen link is given below
[Codepen](https://codepen.io/bzaidi/pen/MWamJvZ)
I am facing the following problems
This carousel is not responsive. I need to change font-size using media queries on almost every resolution. If I see Mecca website, their carousel is perfectly responsive.
When i float the image left, the rightContent div seems to be taking all the width of parent div which is 290px? Why is that?
Is my approach correct?
How can I achieve responsiveness on all resolutions?
Can you someone help me?
Thanks.
I'm using Foundation for Apps (Not Foundation for Sites) and I'm having an issue where there is a lot of blank spacing on my divs.
I am using their new Grid System, which uses flexbox.
I 'thought' I was using their system correctly.
To help understand what I did, I have provided the code in jsfiddle: https://jsbin.com/nekubu/edit?html,css,output
Could someone help point out why there is all this spacing?
I suspect I am using this grid system in the wrong way, but the docs and examples are not extensive enough to get a good use case relevant to mine.
Background context:
First I added grid-blocks for 'rows' and grid-content for 'columns' as per the Bootstrap idea and then following them saying exactly in the Foundation for Apps docs. But then I realise this looked like it went totally wrong, as every div was scrollable and bunches together.
Content Blocks - Grid - Foundation for Apps Docs
"If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks."
So now I have the code you see in this jsfiddle. However, now there is all this spacing. I have tested this in Firefox and Chrome, and both have this issue.
Code: https://jsbin.com/nekubu/edit?html,css,output
Preview: https://jsbin.com/nekubu
The main problem with your code is that inside the div element with the class of main-page are 4 elements that each of them has a sizing classes that want to fill up the entire grid.
Inside a parent element container you can have elements that sum up to 12 and you assign 4*12 (4 child div elements with small-offset-1 and small-11 each). Also the vertical class that you assign to the parent container makes the elements stretch vertically and that's why you see all that spacing.
I've modified your example to this link just to give you an alternative approach:
https://jsbin.com/falojitalu/edit?html,css,output
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
I'm using twitter bootstrap to create a website for desktops and mobile phones. I want the login form to be centered both in the x direction and in the y direction.
So if the grid was 100 x 100, then the form would be at 50,50.
I'm able to get the form somewhat to the center of the screen in firefox using text-align: center; but firefox puts it a bit off to the right.
What can I do to get to the center?
Here is my HTML
Here is my bootstrap.css
Try using margin:auto; on the <div> that contains the form.
That's an awful lot of nested div tags in there, though I know it's partly Bootstrap's fault! One thing I would stress is to make use of the ones that you already have to use with Bootstrap rather than adding new ones to change positioning, because that will create lots of headaches.
After playing with this, I didn't come up with a definite solution, but here's what I think:
Read up on CSS media queries... this will make the solution to your
desktop > mobile problem much easier!
Don't use CSS for a vertical alignment. Divs aren't table cells
and can't really act like them. A small JavaScript that sniffs out
the width of the screen and does the positioning math is better. A
quick Google search will bring up plenty.
I am just trying to achieve the following CSS layout using 960 GS. Pretty much an newspaper article kind of layout. I am finding some problem with positioning.
I am using for your kind info
$ninesixty-grid-width: 978px;
$ninesixty-columns:12;
$ninesixty-gutter-width: 0px;
$ninesixty-class-separator: "-";
I could not achieve the newspaper kind of layout with the image inside the text. Please guide me out some links or pointers or code to achieve this. Let me know if you need futher info
You didn't say if you already had the grid or not, but anyway if you go to - grid generator site and enter the settings:
Firstly wrap the whole page in a container-12 then I would use the following classes on your divs for the layout:
NOTE:
I think you will need to put both elements in the first grid-6 to avoid a float issue. Other things to consider is that you don't have a gutter so elements will be tight up to each other. I would suggest amending the settings and adding a gutter.
Usually I would not add padding to the grid elements as that means you would need to edit the widths and that goes against the grid system.