I'm trying to lay out some buttons so that they're horizontal at full width and vertical on phones, using the Bulma CSS framework. At the end of this post, there's some toy code that demonstrates the problem.
The problem is that the code below works properly on full width devices, but on phone-sized widths, the row of buttons at the bottom is not responsive.
On the other hand, if I change <div class="field is-grouped"> in the below to <div class="field">, then the buttons lay out correctly on mobile (i.e., the buttons are vertical), but the buttons do not lay out correctly on full-width devices: they're still vertical there.
How do I fix this so that the buttons are horizontal on full-width and vertical on mobile? Apart, that is, from just manually doing it with flexbox or something. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim tortor. Tempor orci eu lobortis elementum nibh tellus molestie. Eget mi proin sed libero enim sed. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Laoreet suspendisse interdum consectetur libero. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Nec ullamcorper sit amet risus nullam eget felis eget. Eros in cursus turpis massa tincidunt dui ut. Faucibus a pellentesque sit amet porttitor eget dolor. Nisl rhoncus mattis rhoncus urna neque viverra. Urna et pharetra pharetra massa massa ultricies mi.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field is-grouped">
<p class="control">
<a class="button is-link" href="https://google.com">
Blah blah button 1
</a>
</p>
<p class="control">
<a class="button is-link" href="https://google.com">
Blah Blah button 2
</a>
</p>
<p class="control">
<button class="button is-link" href="https://google.com">
Blah blah button 3
</button>
</p>
</div>
</div>
</section>
</body>
Related
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'm working on a web app which will work on a 800 x 480 pixel screen on full screen mode.
My App is single page app using ReactJS and it has a simple Navigation Bar at top, and 4 Bootstrap Card with 2x2 arrangement.
Code is like:
<div class="nav-bar">Component</div>
<div class="card-deck">
<div class="card-body"> Something-1</div>
<div class="card-body"> Something-2</div>
</div>
<div class="card-deck">
<div class="card-body"> Something-3</div>
<div class="card-body"> Something-4</div>
</div>
Problem is that, Something-3 and Something-4 cards has something in them(!) which exceeds my 480 px limit. Is there any solution that changes the tightness of card without changing margins and padding of the ingredients of card?
The problem is that your .card-body classes come directly under your .card-deck class; you're missing the core .card class in between.
Your .card-deck should contain multiple .card elements, which are the core Bootstrap cards themselves. These .card elements contain the .card-body (which in turn usually contain the classes .card-title and .card-text).
If set up correctly, it doesn't matter how much content a card has in it; it will simply overflow to contain it.
This can be seen in the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
</div>
</div>
</div>
This is my html5 code:
<header id="header">
<img src="img/logo.png" alt="logo" id="logo">
<h1>The Articles</h1>
</header>
<section id="section">
<article class="article">
<img src="img/articles.png" alt="articles" />
<p class="comments">
by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
<div class="border-bottom"></div>
<div class="article1">
<img src="img/cat.png" alt="" />
<p class="comments">
by <span class="woo">JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
</section>
This is my JSfiddle:
http://jsfiddle.net/y3x8zqav/
Now my web-page look like this:
http://imgur.com/GmNAWpx
In my page i marked, that header title and aside bar navigation need to place same line.
Is this correct format for located navigation in aside?
or may i know css property to fix this?
Any help would be highly appreciated..
Thanks in advance.
After reviewing your web site, you need add a couple of changes. Here's the css code to add:
.aside {
margin-top: -80px;
}
.aside > img {
margin-top: 25px;
}
That's it;
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>