I have an issue with having different sized buttons (a tags) with the bootstrap grid system. Right now, I have 4 different sized buttons, and they each take up 3 columns each. For example, I have 4 similar to this:
<div class="col-md-3"> Button Text Here
</div>
My current setup (JSFiddle) is:
http://jsfiddle.net/cov4ca1z/17/
For right now, I'm not worried about how the buttons are overlapping when the window is shrunken down to mobile size. Ideally, what I'm looking for is something like this:
http://oi62.tinypic.com/wbp1sp.jpg
I played around with a couple different things, but I couldn't find anything that worked.
Thanks.
The column widths in the Bootstrap grid system are fixed. If you put each button in its own column, it's going to be constrained by the size of that column, and it will behave independent of your other buttons. So, your very very long button is going to wrap within its own column.
It sounds like you want all the buttons to appear next to each other and have them wrap one at a time as the screen size expands/contracts. I updated your Fiddle:
http://jsfiddle.net/cov4ca1z/24/
I put all the buttons together in their own column and included a float: left in your btn-slider class:
<div class="col-md-12">
Medium
Very Very Very Very Long
Short
About Average Size
</div>
Why not place do something like this?
<ul id="buttonList" class="list-inline">
<li>Medium Size</li>
<li>Very Very Very Very Long</li>
</ul>
Then use CSS to style ul#buttonList li{} to adjust the margins as you would like.
Related
In Figma(not really matter where) template has 1920px width. I want to create a page from it, but in the browser, the page has 1903px. Some of my elements do not fit and wrap down (when using flex-wrap e.g) due to it. So the question is, how to make it properly?
EDIT: On this
screen with clarification I tried to add fourth square but there no space so it wrapped to the bottom. Browser width is 1903px, within template I do from is 1920px. How other people do in situations like this, how it must be done to make it responsive on all pc screens?
Wrap it inside container like in bootstrap you can specify to which screen only it can wrap
For example:
.container-xl will only wrap your content inside container on xLarge screen only.
There are a couple of different ways to tackle this problem. The first would be something along the lines of Rashidtvmr's answer. You can use Bootstrap in your project and simply follow their guide for creating a grid system in your project. With bootstrap, you can solve your issue with something like the below code:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Where a grid system is created of 12 columns and you can specify how many an element should take up with col-2, col-3, col-4, etc. If you want them all to be the same width over all screens, then just specify each as col and bootstrap will take care of the rest.
If you can't or don't want to use Bootstrap, the next solution would be to create your own grid system using CSS. Without an example of your code, it's hard to specify exactly how it should look but following this guide should help you out.
Code is too long to post, but essentially i have a couple divs/sections which are meant to be responsive via float-grid. They look like this:
<div class="col-4">
<section>
<img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.6.3_challenge_responsive_layout/rey_square.png" />
<b>Rey</b>
<p class="expl">xxxx</p>
</section>
</div>
At 745px (give or take) the 2nd row divvies up and pushes the first img all the way to the right and changes in height. My guess is that it has to do with the float, but i really can't change it.
Also, when dragging below 640px the first image appears fine, but the 2nd and all subsequent images show the title next to its image. What is causing this to happen and how do i fix it?
Repl.it
Since you cannot use flex, then you could fix this by using nth-child. The below will target the first item in every row for a 3 column layout, except for the first row which doesn't need this anyway
.col-4:nth-child(3n+1) {
clear: left;
}
I suggest you put this in a media query range so that it does not affect other width. If you don't put this inside a range, you might need to write extra css to override it later
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
I am trying to horizontally align 3 columns (Bootstrap) that have variable heights depending on the size of the view port. As seen on the first picture, everything is centered and aligned on large screens.
When the viewport becomes smaller, the paragraph's height changes and the alignment is lost. I would like to keep the headings (blue), paragraphs, and buttons aligned.
My inital thought was to create three rows for the three different types of elements. Unfortunately I will not be able to do that since I want to keep the border in the middle column.
What would be a correct way of keeping alignment of these three columns regardless of the viewport size?
I've never really seen a perfect answer to this, thats not with javascript, I can't remember the exact code, however, last time i did it, i placed the text in a nested section, each boxes text section had the same class, and i assigned a min-height to that class that was long enough that it fitted the longest piece of text in, then place the button underneath that section.
If you put your code in a JSFiddle i can help you more, however,
it should looks something like this, layout wise,
<div class="four columns">
<img></img>
<div class="text"> this will have a min height
</div>
<input>button here</input>
</div>
I hope this helps, i know it doesn't seem very clear, if you have a live version or a JSfiddle i'm more than happy to help further.
as for the text, you're very limited, there is some very good jquery scripts, just look through http://www.unheap.com
and just have general play with text sizes
Assuming they are in an inline containe vertical-align:middle;
I need to create a page layout like in the following illustration with twitter bootstrap:
The left and right sidebars should have a width of at least lets say 300px. If there is more space they can grow but they should not shrink (elsewhere navigation links will get cut).
The middle column should fill the entire space left.
I have tried it by assigning a min-width to the sidebar spans, but in this case the last sidebar (b) will switch to the next line if the browser content area width gets below 1300px.
I`m not using responsive twitter bs css.
Is there a way to avoid this ? I have already found some approaches, but only without bootstrap, which do not work for me.
As the site I am talking about is already running I will not paste code here but please take a look at it live at http://kunden.tommy-computer.at/fsv_noetsch/ (german)
Thank you for your help !
Best regards,
Thomas
If you use Bootstrap 2 responsive you can do something with fixed sidebars on the left and right.
<div class="row-fluid">
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
<div class="span6">
main content
</div>
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
</div>
example: http://bootply.com/60284
You can decrease/increase the spanX accordingly if you want sidebars narrower/wider etc..
Related
Bootstrap 4 Holy Grail Layout
finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
You are using a grid system, so you should stick with the given grids widths. (even tought 99% of my clients who wants their design to be coded with bootstrap never respect the grid system and use random width, that kills the point of using a grid system)
If you change the width for one grid you must change it for the other too or it won't fit. (a.k.a you must edit the .span8 width to fit the content).