Find solution
How to resize bootstrap popover?

I have 3 columns that contain a lot of html elements. How could I resize the columns and all their html elements inside with the browser window when people resize it?

  • Code sample: <div class="col1"> // Resize with browser window //a lot of elements  // Resize with browser window </div> <div class="col2"> // Resize with browser window //a lot of elements  // Resize with browser window </div> <div class="col3"> // Resize with browser window //a lot of elements  // Resize with browser window </div>

  • Answer:

    If you are just trying to create a simple grid layout and adjust it as the browser resizes, using a CSS framework like Bootstrap is way overkill. It's not necessary at all. I would refactor your HTML slightly so that it has a little bit more meaning and structure. The "1-3" means that each column takes up 33% width and and surrounding <div class="row"> provides necessary structure as you'll see in the CSS: <div class="row">     <div class="column-1-3"></div>     <div class="column-1-3"></div>     <div class="column-1-3"></div> </div> Now we want to design this mobile-first, so our CSS without a media query is going to look like: .row { width: 100%; } .row:after {     clear: both;     content: " ";     display: table; } What the .row class this does is ensures our columns are wrapped in a div with 100% width, which the columns will inherit when viewed on a small screen (meaning each column will have a 100% width when viewed on a small screen). The .row:after is just used to clear our floats and ensure our columns display properly. Now, we want to make sure our columns look good when on a large screen, so we add the following CSS: @media (min-width: 480px) {     [class*='column-'] { float: left; }       .column-1-3 { width: 33.33%; } } This tells us that whenever the browser is larger than 480 pixels (you can change that to whatever value you want), we float each of our columns to the left (which is what makes them "line up"), and we give them each a width of 33.33% (so they each take up a third of the screen width). By using this method for your column layout, you ensure maximum compatibility across browsers, as well as add the ability to add/remove different column widths as you see fit.

Keenan Payne at Quora Visit the source

Was this solution helpful to you?

Other answers

What Michael Meulstee said is correct. You would usually utilize RWD (responsive web design) techniques. An easy way to get into this is twitter bootstrap which I would definitley recommend. Look at this http://getbootstrap.com/css/#grid  in particular. In response to your comment on his answer. In order to have the entire layout change you would need to have something like width: 100% applied to all sub elements so that they also change in response. CSS for sub elements would look something like this: .col1 <element>, .col2 <element>, .col3 <element> {   width: 100%; } Alternatively you could have them center aligned with a fixed width so that as the columns grow wider the content just moves to occupy the extra space.

Will Parker

As everyone said the quickest way is to use a responsive framework. There are many different alternatives. Some just have the grid and some have UI components (that some times you want and some times you don't). Take a look at this article: http://www.sitepoint.com/best-web-designing-frameworks-2014/ Good luck!

Caio Vaccaro

You would use responsive web design techniques such as media queries and fluid design. I'm not much of a web designer but basically you're looking to utilize responsive web design.

Michael Meulstee

As people already suggested you can use responsive frameworks but if you want to experiment it raw then: You haven't mentioned how should they look, See if you want these columns side by side then first assign their width in % like 33%(for 3 columns) and add float left. Eg: .columns{ width:33%; Float:left; } Now we want all the inner divs(or any other containers) to resize themselves according to column width so add this: .columns div{ Width:100%; } If you want any other child element to be responsive then just replace it with "div". (you can add * for everything)

Kush Sharma

I suggest that you use bootstrap.css (http://getbootstrap.com/) . You just have to add something like     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> at the top of your code and something like <script src="js/bootstrap.min.js"></script> at the bottom of the code Just add  appropriate class names to your columns as required ( refer : http://getbootstrap.com/examples/grid/ ) Your webpage will scale according to size .

Saurabh Mathur

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.