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
Related
I am having a bit Problem with my 3 buttons that I am using for my site. I somehow managed to show all my three buttons in a single line (As you can see in the snippet) but I am not able to make them responsive. Means, when the screen size reduces (i.e. to 380dpi), I want my 1 out 3 buttons to shift to the bottom and the rest 2 buttons to remain on top but in center. As you can see in the attached picture.
I am not good in coding, that's why I request you, people, to help me.
Set 'flex-wrap: wrap' to the element with a class testing.
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/
I am trying to keep my boxes from moving when zooming in-out/resizing.
Snippet to my code is here: http://www.bootply.com/qngh4aarVh
I want the three boxes called .col-xs-4 not to move when resizing. I want them to be the same width all up as navigation. I will also later want to make it that when the width is below 480, they appear one under each other, under the carousel.
Thank you for any assistance.
Trying to match something similar to this. http://educationwp.thimpress.com/
I have been at this problem for hours.
I am looking to make my website responsive, I have started with mobile first and am working on creating it for the desktop.
My issue:
when I edit the .col for tablet or desktop, the columns will respond but they will not be on the same row.
When the breakpoint hits for the desktop I would like my picture to be to the right of the menu, and the content to be to the right of the picture.
if I make my
#menu{float:left} //under CSS desktop breakpoint
then i will get my desired result but the menu will lose it's column width.
https://jsfiddle.net/Lrtpjhh7/
any advice? I feel as if I am on the right track but something is not working.
In order to achieve the desired outcome you need to:
Wrap whatever you want displayed near the menu inside a col-9 wrapper.
Add float:left to your [class^="col-"].
Here's your fixed fiddle.
I've been experimenting with bootstrap and I think it's great. However, I've come to an issue that I would love to be able to apply this style, but do not know how to properly do so. What I want is for a section to be split into 2 halves (side by side) - one section has text and content and the other has an image. I know how to achieve this with bootstrap using containers/rows/columns, but I want to remove the borders and margins from the second section so that the image I set in there will take up the full space. It is difficult for me to describe in writing exactly what I want to I have attached a screenshot to depict what I mean.
Please refer to the "OTHER EXPERTISE" and "AMAZING PORTFOLIO" sections in screenshot..
It sounds like all your trying to do is make that other section full width? In that case just set the container width to 100%