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>
Related
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>
For some reason my bootstrap css is not rendering the content in the body of my page correctly. The paragraph tag is rendering inside the image tag. The paragraph tag and image tag are both inside the body.
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paul Drake's Website</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-3">
Resume
</div>
<div class="col-6 text-center">
<h1>Paul Drake's Website</h1>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">My Projects</button>
<div class="dropdown-menu col-3" aria-labelledby="dropDownMenuButton">
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies">Streaming Movie App</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<IMG src="files/_DSC0630-Costco3.jpg">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida cum sociis natoque penatibus. Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Diam sit amet nisl suscipit adipiscing bibendum. Diam sollicitudin tempor id eu nisl. Lacus vel facilisis volutpat est velit egestas. Purus gravida quis blandit turpis cursus in hac habitasse platea. Non enim praesent elementum facilisis leo vel. Nunc scelerisque viverra mauris in aliquam sem fringilla ut. Tristique sollicitudin nibh sit amet commodo. Porta nibh venenatis cras sed felis eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Enim eu turpis egestas pretium aenean pharetra magna ac. Ac auctor augue mauris augue neque gravida in fermentum et. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie. Tristique sollicitudin nibh sit amet. Laoreet sit amet cursus sit amet dictum sit. Sit amet tellus cras adipiscing enim. Ut eu sem integer vitae justo eget magna.</p>
</div>
</div>
</div>
</main>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>
I have replicated your issue in codepen.io and found out that you are missing a cdn link in your head section, add the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
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>
I want to show list above the paragraph in small device and also in extra small device. I uses push-* and pull-* class that are available in bootstrap but its not working. please suggest. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-push-6 col-xs-12 col-xs-push-12">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
<div class="col-md-8 col-sm-6 col-sm-pull-6 col-xs-12 col-xs-pull-12">
<ul class="list-unstyled">
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
</div>
</div>
If you want the list on top on small devices and to the right on medium devices you need to change the order of the elements in the DOM. Then you can use push and pull to do as you wish
Click the "Full page" button to see...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-6">
<ul>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
<div class="col-md-4 col-md-pull-6">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
</div>
</div>
http://jsfiddle.net/dq5T5/
The fiddle above shows the problem.
Since the row has a white background, there ends up being empty space under the image when the browser window is resized.
I just want the image to fill the entire height of the left column, but I also need it to stack vertically as it currently does (responsive).
<body>
<div class="widereport">
<div class="col-md-4 no-gutters">
<figure class="animated-overlay overlay-alt">
<img class="img-responsive" width="640" height="400" alt="img alt" src="http://placehold.it/600x450" itemprop="image">
<a title="image" href="/"></a>
<figcaption>
<div class="thumb-info thumb-info-alt">
<i class="ss-navigateright"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-8">
<h5 class="portfolio-subtitle" itemprop="alternativeHeadline">mini menta | March 2014</h5>
<h3 class="portfolio-item-title mt0" itemprop="name headline">
Title here
</h3>
<p class="itemdeets">85 Pages</p>
<div class="portfolio-item-excerpt" itemprop="description">
<p class="mb9">Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend.</p>
</div>
<p>
<span class="text pull-right mb9">More Information</span>
</p>
</div>
</div>
</body>
Try adding the below in the class for img-responsive in the CSS:
.img-responsive {
height: 100%;
width: 100%;
}
Fiddle