CSS/Bootstrap: 2 Elements next to each other without gap?

bootstrap

#1

Hi everyone,

i just finished the "build a website" lesson and got a little into bootstrap.

Now I tried to apply what I have learned, but i just did not succeed.

I got a nav bar and a jumbotron to work just fine. But next i wanted to place a picture and next to it, a box with a colored background and some text in in. The box should have the same height als the picture next to it and the text should be vertically alligned inside the box. The box also should not be seperated from the image, meaning there should net be a gap between them, they are supposed to be "docked on" to each other.

Using the "row" class and thow divs with col-md-4 i got the picture and the text next to each other(horizontally) without a problem. But everything else just wont look as i want it. The image div and the div containing the text and background color are seperated, also the text only shows alligned to the top of the picture next to it.

Can someome plz tell me a general way with css/bootstrap how to do what I want to achieve?
Picture and text next to each other
text with background-color
no gap between those elements
text vertically centered?


#2

WE could start by examining your markup. Please post the HTML and the CSS you have written. We can download the Bootstrap CSS ourselves.


#3

Codepen

Thank you!


#4

Column widths need to add up to 12. You have a 6 and a 5.


#5

For the purposes of web transmission, it is best if we do not have white space in resource names.

    Pferd auf Wiese.jpg

is better as,

    pferd_auf_wiese.jpg
    // or
    pferd-auf-wiese.jpg

You will need to find a host site for your images so you can pull them down from a server. I'm not sure that CodePen has space for images and resouce files.


#6

Well using codepen, you the gear on the left side in html and css and stuff, there you an add your bootstrap library. codepen takes all the linking away from you, you don't have to write it. You only need to write the stuff you normally write between body tags

I do not understand why you use max-width, why not use a bootstrap container? I am confused