CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Noah Wallaart
Noah Wallaart

Reputation: 35

bootstrap pictures overlapping

I'm fairly new to Html & Css. I'm trying to make a portfolio site as an exercise for myself. However, when I try to put multiple pictures next to eachother, sort of like a gallery. My pictures start to overlap eachother. I have tried to find a solution for a few hours now. But nothing seems to work.

Does any of you guys have a suggestion that might lead to a solution? Thanks in advance!!]1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width", initial-scale=1.0>

     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


    <link href="styles/styles.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>


    <title>Noah Wallaart</title>
</head>
<body>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="header">  
        <div class="navbar navbar-default"> 
           <div class="container">

            </div>  
        </div>  
 </div>

 <div class="jumbotron">
     <div class="container">
         <div class="row">
                <div class="col-md-6">     
                      <h1>Noah Wallaart</h1>
                </div>

                <div class="col-md-6">    
                </div>      
         </div>  
     </div>
</div>     

<section>
    <div class="container">
       <div class="row">
           <div class="col-md-"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

</section>



</body>
</html>

Upvotes: 1

Views: 1467

Answers (3)

Andrew1996
Andrew1996

Reputation: 436

I've used your code and it seems like it's due to the size of the images. Trying specifying the images with the same width on each one.

Upvotes: 0

Andrew1996
Andrew1996

Reputation: 436

Try this: 

<style>
    .col-md-3{
        margin: 10px;
 }
</style>
<div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

Upvotes: 1

Andrew1996
Andrew1996

Reputation: 436

Change 

 <div class="container">
       <div class="row">
           <div class="col-md-"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

to

 <div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

You missed off the 3, which means the medium columns won't add up to the correct 12 so there will be some issues.

Upvotes: 0

Related Questions