?
Solved

How to use bootstrap3 to position 5 icons in a col-md-8 space?

Posted on 2014-12-03
13
Medium Priority
?
185 Views
Last Modified: 2014-12-16
Hi, I'm using bootstrp3.
My page is defined in a container of col-md-9.  I have a row that I would like to split into 2 section, col-md-8 and col-md-4.  
for  col-md-8  section, I need to put 5 icons with one line of title text below each icon, and text should be centered below the icon.  
Using what I have below would leave lots of space on the right side of leftover 2 columns if I  define col-md-2 for each icon.   I would prefer having the icon to be larger and the text to be in one line and fits there.  Right now the line of text would wrap to 2nd line.  is there a way to fix this?
Also, in the XS mode, I would like to have 2 rows display of the icons with 3 on 1 and 2 icons on the 2nd row.  Right now, 1st row is fine with 3 icons, then 2nd row with one icon to the right and 3rd row with the last icon on the left.  How to fix this ?

Thank you.
bootstrap.html
0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40479941
obviously 12 isn't divisible by 5 but you can make it "look" similar by nesting the rows/cols:

http://jsbin.com/kahodi/1/edit?html
0
 
LVL 43

Expert Comment

by:Rob
ID: 40479945
Also I don't follow what you mean for your xs- mode as i get 3 icons on the first row and 2 on the second row.  There isn't a 3rd row.
0
 

Author Comment

by:lapucca
ID: 40481171
With the current code I have, in XS mode, there is 3 rows for the 5 icons.  Not correctly displayed of course.  That is what I mean.
0
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 

Author Comment

by:lapucca
ID: 40481198
I modify according to your code but the icon in the middle would appear quite small.  The 2 on the left and 2 on the right are the same size though.
0
 

Author Comment

by:lapucca
ID: 40481585
What about is there a way to specify each icon length and width as percentage in the div?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40481612
Ok you have two choices and I'd go with your own css as the alternative is downloading a customised bootstrap.
Given you're only using md and xs, I suggest you add your own classes that have the same properties as the bootstrap ones except you make the width 20%.
I'll post an example soon
0
 
LVL 43

Expert Comment

by:Rob
ID: 40481643
http://jsbin.com/kahodi/quiet

I've used .col-sm-25 as the class for each of your elements.

custom css:
@media (min-width: 768px) {
	.col-sm-25 {
		width: 20%;
		float: left;
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}
}

Open in new window

0
 

Author Comment

by:lapucca
ID: 40481903
Rob, what you did looks perfect.  I will try now in my code.  I never seen this before,l what does @media (min-width: 768px) do in CSS?

Thank you.
0
 

Author Comment

by:lapucca
ID: 40481935
It works for me too with evening spaces out.  Thank you very much.

However, in XS mode, there is still 3 rows.  1 row has 3 icons.  2nd row has one icon to the right edge of the row. 3rd row has the last icon to the left.  Yikes!  

My page container is defined with col-cmd-9.  So the page is center with some white space to left and right.  Can you add that to your code and see if it would bring up the same problem?  Thank you.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40481956
I'll take a look at your xs code and adapt it.

The @media query just detects the screen size in this case, which is all bootstrap is doing and apples different styles based in the width of the screen.
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40482038
I'm not seeing what you are with regards to the XS screen.  This is what I see:

Capture.JPG
0
 

Author Comment

by:lapucca
ID: 40503123
Rob,
I finally got it to work.  It's the text below my icons were too long, they're not responsive.  These text are between <a> tag.  I used the visible-hidden or display when in XS mode to add x-small font size and that fixed it.  Thank you very much.
0
 

Author Comment

by:lapucca
ID: 40503132
I have a question related to this one, Asked On2014-12-16 at 10:00:16ID: 28582033

Can you help with this?  Thank you.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question