Center images in bootstrap

1

I want to use class=“jumbotron” with 2 imgs & text (img 1… text… img 2). How do I align the images center?

1 Like
2

The images have to be on the same row as the text? In that case you could use a div with class=“row”, and a div class=“col-md-4” for each of your elements. There’s a challenge which explains how to use columns in bootstrap. If you post your code or more information we can help you better.

3

Hi, thanks. Can I just post the code here?

4

Maybe it’s better if you post you codepen link, I don’t know if the forum has syntax highlighting (to make code easier to read)

5

Stupid question time… where on Codepen do I find that?

6

Hi

I assume it’s this http://codepen.io/deanksalinux/pen/EyrKEr

Thanks

7

Hi, @Atomk. You can post code with syntax highlighting in the forum.

Type 3 backticks (not the single quote) on one line followed by the language (html, css, javascript, etc.), then press ENTER twice, then another 3 backticks. Then type/paste the code in between.

Good thing there’s this topic

8

Awesome, thanks for the link. I’ve just started using the forum, I suppose I still have a lot to learn :slight_smile:

9

Uhm, you don’t need to include the <html> tag in Codepen, it is explained somewhere in FCC challenges before the projects…did you complete all the previous challenges? Because for example you can use the img-responsive class to make images use the right amount of space. I’d suggest not to put images in a row because it is really tricky to do it correctly, but you can correct a bit by changing col-xs-4 to maybe col-sm-4 so image don’t go under the title.
You used a div with class circler, why? You can use class img-circle on a image to make it round. This also was in a Bootstrap challenge in FCC, maybe you should review some of them to see what you can do without searching complicated things.

10

The tags were a copy error… I did the work in Eclipse and copied into Codepen.
I don’t recall a challenge related to Codepen… will see if I missed something.
The img-responsive class didn’t work when I tried it initially. I’ll try it again and post if I get a different result.
The circler was once again my ten thumbs not working well. On my actual submission the class is correct.

Would still like to achieve the result though so any other assistance will be great.

Thanks

11

First, you shouldn’t use eclipse for this. Eclipse is for Java development not for making websites. If you want a good IDE, I would suggest Visual Studio Code or Notepad++, both are free. Also, you can do all your work on codepen at first, it is actually easier then copying-pasting it later.

You don’t need to wrap the image with a div with class 'img-circle. You give the image that class:

<img src="https://s-media-cache-ak0.pinimg.com/236x/2f/97/d4/2f97d469d6a39b4729279a9a96bec78c.jpg" class="img-circle">

Also, Why do you even have that when the image is circle to begin with…

.img-responsive scales images accordingly to their parent, its not really going to work much the way you have your images in a row.

You would be better off to take some time and look at the bootstrap pull and push classes, would be much easier to use floats to make images side by side with text.

12

You definitely have missed this challenge, especially the Codepen part where it explains how to include Bootstrap. Review the Bootstrap challenges and, after that, tell us if you solved your problems.

13

@IsaacAbrahamson, Actually Eclipse can be a very good IDE to create webpages as they have multiple versions that specifically target web development. Also, some other IDEs are built upon the Eclipse platform. I know they also make Java targeted versions, but that may or may not be what the OP is using. I’ve used a variety of IDEs and to each their own. Find one, or in my case a few, you like and use it/them. Doesn’t matter if it’s IntelliJ, Eclipse, Atom or whatever else you may use.

1 Like
14

Didn’t know that thanks, the only one I ever used was Eclipse Mars for java.

15

Hey everyone

Many thanks for the comments and advice it’s much appreciated.

16

@deanksalinux, here’s a few things to remember when you’re creating pages in an IDE and copying to CodePen.

  • Only copy the code between the <body> tags.
  • Don’t forget to link any libraries you’re using (bootstrap, jquery, etc) in the CSS and JS sections of your pen.
  • Links to local files will not work (ex. ‘site.css’)
  • Any links to style libraries in the HTML section will override the contents in the CSS section of the pen.
17

This is an old post but I wanted to add my answer to that in case we have other students with the same question I had the same issue and found the following solution:

You have to add each "col-xs-x into a div with the class “mx-auto” and you will be able to center all of the images even if they are in a “row” class. This is using Bootstrap 4

example:

<div class="mx-auto">
    <div class="col-xs-4">
        <img src="..." alt="..." class="...">
     </div>
</div>

This is my codepen so you can see what I did: https://codepen.io/blad2/full/EEKpdx/