I've been trying to make a responsive Nav-bar that is on top when Mobile and on side when Desktop.
The problem is that to achieve this I'm not sure what is the correct approach regarding the Rows and cols. Because on mobiles, I have a Row with col-x-12 for top-nav and another Row with col-x-12 for the content below.
But if i want to achieve a side by side cols (col-2 and col-10) for dekstop sizes, I have a problem regarding the 2 rows. They can't be side by side.
Also I tried to make 1 row and 2 cols, for navbar (col-md-12 col-lg-2).
For content (col-md-12 col-lg-10), but i don't know if its safe to have 2 cols-12 inside one single row, So, what would be the correct approach for this responsive navbar? thanks!
I may have a solution for you.
Try to make two div, one is only displayed in desktop resolution (it would contain the sidebar), and one is displayed in mobile resolution (would contain the topbar)
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Take a look at that https://getbootstrap.com/docs/4.3/utilities/display/
Related
I have a row of several cards of different sizes. On larger screens it looks fine, like so:
but on smaller widths, the cards don't look great.
I would like to stack the cards, so that the key stats on the right are aligned underneath the Quant ratings on the left hand side.
Here is the website: https://cs50-final-stock.herokuapp.com/
Ok I figured this out. I leveraged the Bootstrap Docs to determine the proper classes for stacking on smaller screens. The key is adding sm to all of the col tags.
More info here: https://getbootstrap.com/docs/5.1/layout/grid/#stacked-to-horizontal
I have 5 bootstrap buttons placed side by side on the same line. They look fine on desktop. Screenshot-
But on smaller viewport, the buttons are placed over two lines without any spacing between the lines. As a result they look odd. Screenshot-
I am wanting to keep some vertical spacing between the lines on responsive view so they look similar to this-
I want to make it so that there is always a line spacing there irrespective of the number of buttons on the same line or total number of lines on responsive view.
Is there any way to do this with bootstrap?
Thanks
try using this button{margin:10px;} Give margin where you want
Check This fiddle
jsfiddle.net/rzdcxgr5
I have an issue I can seem to get a grip of.
On my website I have 2 'Cols' (col-md-9 and col-md-3) this then on the web puts them side by side (which is fine).
The right hand side (col-md-3) contains 3 panels in it which run underneath each other.
On a tablet size device, I have made it (col-sm-12 and col-sm-12) which puts the right hand column at the bottom which I want.
and I have added col-sm-4 to each panel so instead of running underneath each other they run side by side on the tablet.
BUT what I want to know is, is there a way of only using the col-sm-4 when tablet size otherwise don't apply a 'col'?
I've tried using adding the col-md-12 to the panels but this shrinks them and makes them look odd.
This is a hard thing to explain.
Bottomline is, if small, apply the 'col' otherwise don't.
To resolve it I removed the col from my controlling DIV and added the sizes to each panel
I trying the CSS-Framework Bootstrap and I have a question.
Here is the Fiddle: http://jsfiddle.net/hzAUz/
Let's say I have a div, with 3 equal divs inside of it:
<div id="main" class="row">
<div id="columnleft" class="span4">LEFT</div>
<div id="MainContent" class="span4">Content</div>
<div id="columnrigh" class="span4">Right</div>
</div>
So what happens, when you use Bootstrap, is that as soon as the windows get smaller, the Divs are stacked in this priority:
1. Left
2. Content
3. Right
But it makes sense, to put the content first.
Does anyone know how can insert priorities when using the bootstrap-responsive.css?
Thank you very much in advance.
KG,
George
There's a few ways you can do this.
One would be:
Start at the mobile size, and design "mobile first". That would make your small screen stuff easy, and then you could add additional classes to those containers to accommodate the larger screen sizes.
Another option:
Plan for mobile, and see if you can't either hide/convert your elements in smaller screen sizes to something more mobile friendly. ie...your left stack of nav links become a select menu in mobile; thus, only taking up a single line of real estate.
My preference is to use javascript, and convert left, and top navigation into a show/hide element (button) in mobile size. That way, I've just a logo and button in the top of my UI, and content immediately following.
I do not believe there is a way in Bootstrap 2, but if you were to move to Bootstrap 3, you can control column ordering. See http://getbootstrap.com/css/#grid-column-ordering for details.
Definitively upgrade to bootstrap 3 if you can, as #Sean suggested, but if you can't right now, some of these answers may help:
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
I am new to using Skeleton CSS grids, so please excuse my ignorance!
My problem seems a simple one at first, but it's had me a bit stumped.
Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:
On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.
The default behaviour of Skeleton is to stack this sidebar on top of the main area.
Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?
Thanks,
Michael.