How to place text and image in the same row?

How to place text and image in the same row?
0

#1

Hello!

I’m working on the web portfolio project and I’m having some issues placing an image on the same line as my text. Here’s the link to my project (https://codepen.io/jessebly/full/VjWZYK/), and I tried to comment my code as clearly as possible but I’m new at this.

I would like to place the image on the right side of the “ipsum” in the about section, and I’ve searched for several ways to do it but I can’t seem to execute them correctly. (I will worry about resizing and stuff when I am able to place the image correctly).

Any help would be greatly appreciated! Thank you!


#2

@Jessebly after your container div, you should create another div with class ‘row’. You can enclose your abouttext and aboutimage divs inside the div with class row.
You might also need to use col-sm-6 classes of bootstrap in your abouttext and aboutimage divs.
And you won’t need to worry about resizing if you use bootstrap classes correctly.


#3

Thanks for your help! For some reason when I applied bootstrap to the CSS there is now a blank white space on the right side of my page that I’m not sure how to get rid of, would you have any idea how to fix that? Unfortunately I don’t seem to have that great a grasp on bootstrap


#4

I don’t see any blank white space. But if you are struggling to get a grasp on bootstrap then best way is to go through official bootstrap documentation. It’s nicely written and try out their examples in your browser.

add col-md-6 class to both abouttext and aboutimage div.

Start with understanding how grids work in bootstrap. It’s perfect way to start.
http://getbootstrap.com/css/#grid-example-basic
Then there are basic elements like buttons, forms etc.

Checkout few bootstrap templates and how they use bootstrap classes, etc.
http://getbootstrap.com/getting-started/#examples

Try to create your portfolio project by taking inspirations from others design. Don’t look at their code.
Almost every basic thing that you want can be found from here,
http://getbootstrap.com/components/

I just started few days back and am learning. I noted down my journey. Hope it helps.


#5

Yeah I want to know how to do it in both regular HTML5 and Bootstrap so I went ahead and just made separate pens for each one, so that I walk away knowing how to make the same site with both. Thank you for the resources! I’m certain they will be of great help!