In Bootstrap grid system how to align grid for following effect? - css

I am using a bootstrap grid following images show a mobile view and desktop view.Mobile view[1] Desktop view [2]. Please guide me on how to achieve this. This is my code.
[1]: https://i.stack.imgur.com/OUYfU.png
[2]: https://i.stack.imgur.com/0yri7.png
<div class="card" style="background: rgba(255, 29, 0, 0.05);">
<div class="row">
<div class="row">
<div class="col-sm-5">
<h3 class="p-50 m-l-20">Lawns and Banquests</h3>
<div class="scrollmenu m-l-50">
<a class="">Aster Lawns</a>
<a class="#news">Iris Lawns</a>
<a class="#contact">Tulip Lawns</a>
<a class="#about">Marigold Hall</a>
</div>
<div class="lawn-tile p-50">
<h1>srfdfsdfds</h1>
</div>
</div>
<div class="col-sm-7">
<img class="" style="width: 742px; height: 589px;" >
</div>
</div>
<div class="row">
<div class="col-6">
<div class="lawn-text">
<p>sdfsdfsdfdsfsdfsdafsdkbsjsdjbsubuvwekuwrhfsgvbfuywherhfuefhirherihger</p>
</div>
</div>
</div>
</div>
</div>
</div>```


Try this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assests/style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>HELLO BOOTSTRAP</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non,
suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
</p>
<p>
Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
Praesent massa purus, iaculis eget consectetur sed, dictum in turpis.
Mauris quis tempus massa. Sed quam justo, viverra id
ligula sit amet, aliquet vehicula tortor.
</p>
</div>
<div class="col-sm-12 col-md-6">
<img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

Related

Why isn't the background color in my nav region correct

I am working on a project for a class using an older version of twitter bootstrap, and in the process I discovered something odd with my background-colors.
On both the <nav> and one of the <div> elements I specify the same background color #D3D3D3, but when I view the page in my browser the two sections have different grays for their backgrounds.
Any ideas why this is and how to fix it would be appreciated.
My page is at:
http://donraikes.github.io/hcj/csstest/
My index.html follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module-3 Solution</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body style="background-color: white; color: black; font-size: 16">
<header style="background-color: #D3D3D3;">
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div id="nav-header" class="nav-header">
<h1 class="nav-brand">Food, LLC</h1>
<button " type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right hide-md hide-sm visible-xs">
<li>Beef</li>
<li>Chicken</li>
<li>Sushi</li>
</ul><!-- #nav-list -->
</div>
</div>
</div>
</nav>
</header>
<h2 class="text-center">Our Menu</h2>
<div class="container">
<div id="mainsection" class="col-xs-12" style="background-color: #D3D3D3">
<h3 class="text-center">Chicken</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fermentum ligula. Aenean sollicitudin rhoncus fermentum. Maecenas laoreet, sem non dictum venenatis, mauris ipsum maximus mi, non pulvinar orci nisi a justo. Pellentesque vehicula convallis leo at feugiat. Praesent finibus lorem nibh. Mauris pellentesque sagittis eleifend. Donec rhoncus eros a ex hendrerit tincidunt. Donec quis tempus tellus. Pellentesque vitae ipsum sed sapien consectetur posuere.</p>
<p>Suspendisse dignissim tristique sem vitae viverra. Pellentesque pulvinar mi a lorem lobortis euismod. Maecenas massa nisl, venenatis ullamcorper metus eu, semper dapibus nunc. Praesent vulputate aliquet arcu. Fusce suscipit arcu ut ipsum varius, sed sagittis elit vestibulum. Morbi ac bibendum massa. Curabitur pellentesque auctor ipsum, sed varius turpis pretium sed. Sed augue purus, accumsan id diam sed, ullamcorper lobortis justo. Nulla facilisi. Praesent lacinia iaculis pellentesque. Nulla sed finibus nibh, at vulputate purus. Aliquam erat volutpat. In ac est a nisi volutpat mattis vitae sed est.</p>
<p>Duis ullamcorper nulla sit amet tortor condimentum, at molestie massa hendrerit. Nulla quis scelerisque lectus. Vivamus placerat, erat eget tincidunt bibendum, felis metus tincidunt mauris, ac consequat odio arcu ut diam. Etiam sit amet aliquet augue, eget vestibulum magna. Donec at facilisis elit. Morbi eu massa iaculis, aliquet massa sit amet, sollicitudin mi. Integer commodo metus eu massa tempor, vitae sodales enim fermentum. Nam lobortis dui vel odio imperdiet bibendum. Vestibulum aliquam purus orci, vitae pharetra felis pulvinar sit amet. Morbi sodales arcu ligula, maximus rutrum risus ultricies vitae. Ut velit nibh, feugiat eleifend ultricies quis, volutpat in arcu. Fusce dapibus erat risus, nec volutpat nisl pellentesque non. Nam nisi sem, dictum at neque sit amet, fermentum dictum mi. Phasellus rutrum, enim at vehicula hendrerit, ex magna elementum orci, id malesuada nulla leo non dui. Proin vitae interdum dui.</p>
</div>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

You have applied background-color: #D3D3D3; to the header that is parent to nav.navbar-default. However, nav.navbar-default has a background-color specification from line 395 of navbar.less that is displaying over the header.
For background-color: #D3D3D3; to be visible, apply it inline to nav.navbar-default.
<body style="background-color: white; color: black; font-size: 16">
<header>
<nav id="header-nav" class="navbar navbar-default" style="background-color: #D3D3D3;">
...

How can I display an image to the right of my text normally but display the image underneath my text on mobile?

I'm wanting to display an image to the right of my text on desktop, but display the same image underneath on mobile. Struggling to find answers via Google and can't crack it myself.
Any help?
This is what I have so far.
Thanks!
I've tried using col-xs col-sm but doesn't achieve what I want
http://jsfiddle.net/ncyL2hat/
.text {
text-align: center;
color: black;
font-size: 30px;
}
<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col-sm-6">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col-sm-6">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
<style type="text/css">
.text {
text-align: center;
color: black;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap offsetting columns that are not central

This is my first time using Bootstrap and I have some problems trying to get my content central.
I want to contain the content width, but allow the background colours to flow the full width of the page. I have tried to offset columns, however this just results in uneven spacing either side of the content.
My current markup is here:
https://codepen.io/charlyanderson/pen/bKggyb?editors=1100
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-lg-5">
<div class="row">
<div class="col-lg-8 offset-md-4">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-lg-7">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>

Use ml-auto for the first inner column and mr-auto for the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
Use a dummy col-lg-4 column before the first inner column and after the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
You may find this question also useful.
Offsetting columns is not working (Bootstrap v4.0.0-beta)
Update
if you want to have a smaller left column and larger right, use this code.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
By the way, better to use text-right instead of text-align: right; style.

div is initially collapsed even after using 'collapse in' class for it

In the below code the division #content1 is initially being collapsed even after using "collapse in" class. What should I do to show the content of Column1 initially?
Note: I don't want to use any javascript function to handle this task
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> Column1 </h1>
<div id="content1" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<h1> Column2 </h1>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h1> Column3 </h1>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

.in was used in bootstrap 3 (https://getbootstrap.com/docs/3.3/javascript/#collapse). In bootstrap 4 it's now .show (https://v4-alpha.getbootstrap.com/components/collapse/#example).
So you need to add the class .show to the div:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> Column1 </h1>
<div id="content1" class="collapse in **show**">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<h1> Column2 </h1>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h1> Column3 </h1>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

960 grid, img problem

recently downloaded the 960 grid system to play around with.
Now the problem im having is that the image is not coming across to the left after the singer songwriter tag is closed off. Both columns before the image add up to 12 exactly
The following code should display a logo image up top, singer songwriter description to the right of it. Then on a new line i should see image placeholder in gray and a paragraph of text to the write of that. However it is currently mixed up
Can anybody advise me if i need to change anything to accommodate images
heres a link to the page http://digitalgenesis.com.au/sites/alice
and heres a link to how i basically want it to flow http://digitalgenesis.com.au/sites/alice/img/960img.gif
Page code
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<title></title>
</head>
<body>
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</body>
</html>
the second grid 5 should be seperated on a new row

Try this:
Put your reset before 960.css and then add a clear after the first line.
click here to See example jsfiddle
Here's my code:
<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clear"></div>
<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>

You're looking for clearfix class to drop the next set of divs down
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clearfix"></div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet,.... </div>
</div>

Resources