Create template with Bootstrap 3

HTML & CSS
1

I’m using Bootstrap 3 to create new template. I have some problems so hope anyone can help me. Thank in advance.

  1. In the white box content, how can I create double polygon like this. Should I use font icon or slice image.

  2. In the black box content, please show me how to design like this, I really don’t know how to do that.

2

Hi,

  1. You could use two overlapping rectangles and rotate them with transforms but as you have icons in the middle then you may as well use an image for the whole thing (unless you already have font-icons for the little icons in the middle).

  2. Whether its boostrap or not you would code that section in the same way you would code any section. It’s just 3 columns and some margins. You can use bootstraps grids for the columns or just come out of the grid for that section and use your own code. It’s just basic css.

I would do it with 3 display:table-cells with a fixed width middle cell for the icons and the fluid width cells for the left and right columns. Just move the first item in the third column down with some margins.

Or use appropriate columns from the bootstrap grid.

3

Hi @Paul-O-B,
Thank you for replying

  1. If I use image and font icons in the middle, so when hover image, how can I set color for image as an image.

  2. Could you provide me example code for this.

Thank in advance.

4

If you are doing this for modern browsers only then you could it like this.

http://www.pmob.co.uk/temp/icon-test.htm

Otherwise just us an image for the whole thing and swap the image on hover.

  1. Could you provide me example code for this.

You show me yours first :slight_smile:

We like the OP to make an attempt first before we offer code so that we can see where you are at and also to give us some code to work with rather than working from scratch.

5

Hi @Paul-O-B

Here is my code for question two, hope you can show me how to put line under image, pseudo-element can’t display with img tag. Thank in advance.

http://codepen.io/thehung1724/pen/roGhl