I am trying to make a collapsible grid on bootstrap to show details of each item:
Here is a link to a picture to show the main idea.
I have been following the following thread which has been very useful: https://www.codeply.com/go/TLJi5MxQ1E
However they way that their html is coded, each row on small screen must be a factor of each row on a large screen (eg. 4 rows on screen --> 2 rows on a small screen)
What I am trying to do is to have 3 increments: 3 columns, 2 columns, and 1 column and I am unable to figure out how to make it work. Any help will be appreciated
a few things:
You should add what you have tried to accomplish this instead of just coming here for someone to write code for you.
With that said, I used to do the same thing occasionally in my earlier questions, so i have decided to help you.
here is the solution for desktop (without bootstrap) keep in mind bootstrap is dynamic and will adjust your content to screen size on tablet, desktop or mobile.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
display: flex;
flex-direction: column;
border: 2px solid grey;
}
.row {
display: flex;
align-content: center;
justify-content: center;
}
img {
height: 200px;
width: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
<div class="row">
<img src="https://lh3.googleusercontent.com/proxy/fEYdsyPpuHjBaYcf-ImCa4jrGrKo3qIHzfgEvoYHMPQaqrxuPXHzDFxhL15qpYPOYp-8R0ELgc0JZ0LCJaLgDghVBu3a_TTAOB2cPu5tdt_Kb03WFEflMWse2H9KGPJ1aMRCoARvdofMWBFnVhavJw">
</div>
</div>
</body>
</html>
if you want to customize this further, you will need to familiarize yourself with media queries in CSS. you can write rules for displaying 2 per row, or 4 per row, or whatever per row, based on your own logic.
with the code here and some research on media queries, you will be able to accomplish this.
IF...you update your question with some code, and what you have tried (i have given you code and pointed you in the right direction) I will be happy to comment or help.
Cheers
Related
I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I began designing a mobile first website. First ever paid website!! I'm not using Bootstrap until I master flexbox, so don't say use bootstra//templates :) I'm having problems as my site looks good when viewed mobile, but looks like crap when viewed on a large screen.
A specific problem I'm having is a 2x7 row/column grid, the words spill out of the container, but fit fine with mobile view on.
This is not specific to chrome.
How do I make flexbox mobile friendly? Is it simply flex-grow/shrink? I find it odd that my divs need to shrink as the screen gets larger, and they def shouldn't get any bigger..and If I make the white portion of the div a larger VH it will also "fix" it. But that seems counter-intuitive...On a bigger screen I must make the container an even greater % just to fit the same size font??
Or is this a media query thing...and if so what would it be? Media Query's making fonts smaller seems wrong, I'm looking for the best way/best practice not a work around if possible :)
MY CODE:
HTML5:
<div class="s2-row" >
<div class="s2-columns center">Talent Management</div>
<div class="s2-columns center">Athlete & Artist Development</div>
<div class="s2-columns center">Booking Talent</div>
<div class="s2-columns center">Negotiating Booking Rights</div>
<div class="s2-columns center">STravel Logistics</div>
<div class="s2-columns center">Sound</div>
<div class="s2-columns center">Lights</div>
<div class="s2-columns center">Backline Equipment</div>
<div class="s2-columns center">Venue Selection</div>
<div class="s2-columns center">Event Set-Up & Contracting</div>
<div class="s2-columns center">Sponsor Mangement</div>
<div class="s2-columns center">Promotional Negotations</div>
<div class="s2-columns center">Complete Event Presentations</div>
<div class="s2-columns center">Rider Requirements</div>
<div class="s2-row2 center">As well as many other event specific
needs</div>
</div>
CSS3:
div.s2-row {
display: flex;
flex-wrap: wrap;
line-height: 2;
text-align: center;
margin-bottom: 50px;
}
div.s2-columns {
flex-basis: 50%;
}
h3.s2-row2 {
text-align: center;
width: 100%;
margin-top: 15px;
font-weight: 600;
font-size: 30px;
}
.center {
align-self: center;
}
Desktop View
Mobile View
Thank you in advance!
(2nd pic is how it looks on mobile)
I settled with simply making the container elements vh bigger. I think I could've messed with flex-shrink/grow or media queries as well but I kept it simple.
Media query width is not applying to col-md class. Below is my code. I am using latest version of Bootstrap.
<div class = "col-md-8 article-container-fix">
<div class = "articles" >
<article class="clearfix">
<header>
line 1
line 2
line 3
</header>
</article>
</div>
</div>
CSS code
#media(max-width: 1199px){
.article-container-fix {
width: 400px;
margin-left: 1em;
background: black;
color: white;
}
}
Except width, all three other properties apply to this class ".article-container-fix" but not that "width: 400px". I don't know where I am missing anything.
I would suggest you to try it with a bit less max-width than 1199, something like 720px to see if it works or not. Other way to output this would be the following
HTML:
<div class="col-md-8">
<div class="article-container-fix">
Content here!
</div>
</div>
And use the same CSS you used before. It's complicated with bootstrap to actually get some things in place the way you want it, and for this, it could be interfering with pretty much anything. Hopefully this will work for you.
ITS Due to you have write your article-container-fix class with col-md-8 class. col-md-8 is a Bootstrap framework class. By default there is a default width given in bootstrap.css.
There is two way to overcome from this problem:
Either you have to write !important in your media query like width: 400px !important;
Or
You have to re-positioning your css in your <head> tag, include most last your responsive.css in your <head> tag.
I am trying to integrate MOSS 2007 with bootstrap and create my own site design. I met some problems with that and maybe you can help me a little:
I have done my own master template and it looks pretty good on default page, but I have problem with styling for example List View page.
I can give you example of my problem:
this is part of master containing PlaceHolderMain:
<div class="container main-container">
<div id="loginPanel" class="row" >
</div>
<div class="row">
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
</div>
</div>
According to that I have tried to make page max-width of 750px
.container { max-width: 750px; }
This is how it looks with list view(Note that all table is placed in div which has 750px width, and table itself has computed width 791 in this case)
I have been trying to make for example:
.row table{
max-width: 750px;
}
but it does not work. I was also trying to make
table {
table-layout: fixed;
word-wrap: break-word;
}
but it screwed all Sharepoint site
Do you have any hints for that problem?
Help please :)
Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!
So...my frustration lead me to ask you guys:
HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?
HOW?
Option 1: Google 'CSS 3 column layout'. This is has been well covered over the past 6 years or so and there's gobs of tutorials out there.
Option 2: Google 'CSS Framework' and pick one to build your layout. 960.gs is a popular one.
WHY?
Ideally, you'd use tables for tabular data and css to layout the rest of the page. Why? Well, in theory, CSS gives you a lot more flexibility. The best example is probably when it comes to responsive web design. On an iPhone, I may want 2 columns. On my iPad, I may want 4 columns. That can all be done with CSS, but gets really complicated if you hard-wire the HTML using tables.
Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.
Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }
CSS3 has some neat column layout options, but they're not very good compatability-wise, and a fair number of the options aren't supported by a large number of browsers.
If you're seeking to make columns of variable/fixed width, then this is probably the article you're looking for:
http://www.alistapart.com/articles/holygrail
Using this method, you can set one or more divs to a fixed width, while having another resize appropriately to fill the page.
If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%