I just start to use this framework Bootstrap 3 and i am trying to change the order of a row.
On css flexbox you can change the order of flex object by adding the order : 1,2 and more to different elements.
Is it possible to do that on a row in bootstrap?
I have a logo image and i want that on a mobile site it will be at the top of the page,
And In a desktop site it will be after a few rows in the top.
There is nothing that I know of in Bootstrap that will allow for that type of change vertically. So your best option would probably to be to duplicate the logo in the places where you want it, then use Bootstrap's responsive utilities to control if they are visible based on screen size.
Working example: http://bootply.com/91992
No, at least not conveniently with CSS alone. You'd have to use jQuery (or just JavaScript). A better approach might be to create duplicate elements and show/hide with media queries.
Related
I lifted the code to create a horizontal card for my band's website which can be seen here:
http://www.jukeboxjunkies.rocks/Song
I really like the look - but when the cards are viewed on a mobile device, the rows stack and I don't like it as much.
The version I like
vs:
the version I don't like (shows like this on smaller devices)
So, 2 things...
How do I prevent the rows from stacking?
I need to add a link on the far right that will just say "Request" - This will show up based on a setting in my database (basically if I turn on requests for the gig) - I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.
I can put the HTML code in here - but it can be seen on the site - let me know if I need to post it here and I will.
#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don't want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
I would also recommend that if you make any CSS selector adjustments, don't make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don't override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).
In Bootstrap I have a standard collapsible navigation.
When the mobile navigation is open I want to add an extra element to the top of the navigation, essentially as quick links to key areas.
I have added the below picture to illustrate my idea.
Essentially I have the Bootstrap navigation but is it feasible just to add a DIV or include a file at the correct viewport, in order to add the extra grid above the navigation.
UPDATE
So far I have the following using the advice given, I think now all that's required is to remove padding, as the navigation is in a col-xx-12.
You can use bootstrap responsive utility classes such as .hidden-xs .
This allows to hide and show the divs based on the screen dimension.
Refer here
I need to create a pictures slider that looks like this:
The pictures need to lay one on each other on such way that the user could see the first picture on full size and some fraction form the others. Is there any way to do it on css only? Is there any available addon on the internet that give some solution for that?
You can use bootstrap-carousel for it and change the position and styles of the carousel indicators by applying your custom classes to them. Here's the link for bootstrap carousel.
I know how to change stack order using push-pull classes, but as far as I know (and tried) it only works if you have two columns.
In my design I have a container with a box nested floating on the top-left. I would like it to be under the container content when viewing on mobile.
Here is a sketch of how it is on desktop: https://db.tt/nZGvCih0
And this is how I want it to look on mobile: https://db.tt/Td6PlwT5
Right now the box is on top of the container content.
(I'm using Bootstrap 3 and prefer not to use js)
I think you can hide divs and display another div while loading on smaller devices .Check this link out it may help you
http://getbootstrap.com/css/#responsive-utilities
Thanks
Which you are seeking is a 'float: bottom' css and alas my friend, there is none (Ref: How can I position my div at the bottom of its container?).
There are several alternatives which you can consider:
Create two divs 'content', one for mobile and one for desktop. You can hide them respectively by using the responsive utilities mentioned by #sunilkjt.
Use CSS3 responsive media queries to do a 'position: absolute' on the div 'box' when on mobile, hence placing it at the bottom.
If you provide us with your html/css, i can create a jsfiddle that suits your needs.
Hey im trying to achieve this look:
Problem is I can never put 2 spans next to each other they always stack up and im trying to not have that happen as you can see in the picture. Any Twitter Bootstrap CSS genius have an idea?
And just to be a bit more specific this is only for mobile view meaning that I am using the bootstrap class "visible-phone" on my container class.
From Bootstrap 3 Documentation
http://getbootstrap.com/css/#grid
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.