Here is what I'm trying to achieve
Here is a skimmed version of my code that has added columns and rows from bootstrap
The code does not make a stretched link. It is just a normal button link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="row">
<div class="card col-md-6">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
The problem was using bootstrap 4.0.0 that did not support stretched links
Changed to 4.3.0 and it works perfectly
Related
I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5
the code:
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4"></div>
<div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
the output on desktop:
the output on phones:
To hide element on particluar screen breakpoint use .d-sm-none .d-md-block
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4 .d-sm-none .d-md-block"></div>
<div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.
I'm still struggling with Bootstrap and I've just started a web application using Bootstrap 3. I would like to align a box on the right side of the screen but I can't find my solution after a few hours of research and testing... Here is where I would like to place it:
Here is the existing code:
<div class="container-fluid">
<div class="row mt-4 mb-4">
<div class="col-md-12 mt-4 mb-4">
#if($user->object->bio)
<blockquote>{{ $user->object->bio }}</blockquote>
#endif
#if($albums->count())
#include('pages.partials.album-stream-2021', ['albums' => $albums])
#else
#include('partials.no-results', ['message'=>'This user have no albums uploaded'])
#endif
</div>
</div>
</div>
Open this example full screen:) you should be good to go:)
div {
border:1px solid;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div id="DivLeft" class="col-md-3">
left Side bar
</div>
<div id="DivMain" class="col-md-6">
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
</div>
<div id="DivRight" class="col-md-3 ">
right Side bar
</div>
</div>
I am trying to follow along on Colt Steele's course and for some reason, my cards will not show up. Anyone know why my cards won't show up? I'm trying to do three image overlay cards that are decked with equal spacing between each other by using some basic bootstrap add-ins but they won't even show up.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Best 90s Anime</h1>
<p class="lead">Lorem ipsum</p>
Add to List
Vote
</section>
<div class="card-deck">
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/432-SeriesThumbnails_SM__400x320.jpg" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title">Sailor Moon</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/15-SeriesThumbnailsAnime_INY_400x320.jpg" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title">Inuyasha</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://store-images.s-microsoft.com/image/apps.39852.14455250034361967.824623c3-91b6-402f-9a68-c66bfac9bc20.7bfae929-5b2a-4efe-9639-5ffd1e2de297?mode=scale&q=90&h=720&w=1280&background=%23FFFFFF" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title">Dragon Ball Z</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I would like to make an adaptive design for a small website with Bootstrap, but I'm a newbie and can't find any solution for my problem here. I want to be able to display the header for a wide set of different devices, it means for cell phones with small display too. So I have written something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
</body>
</html>
It works with every web-browser pretty good, but it doesn't work properly for small resolutions.
This is the normal view of this page:
But after reaching some width (it should be 576px as I see), it breaks my layout into three lines for every div:
It doesn't depend on text or image size, there a lot of place there, so it should be a behavior of the Bootstrap.
How could I avoid it and do a really adaptive design? My page is very simple and it should be a solution to display it properly, I can't understand why Bootstrap doesn't allow it.
Add col for smaller screens. You can remove col-sm and leave only col-
This happen to your code because you didnt set anything for smaller screen than sm and bootstrap by default set any column to col-12. So your three rows on small screens had col-12 inside them. The title went to center cause of text-center class and last image went left cause of text-right.
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 col-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 col-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 col-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
Live example
If you want different approach on small screens change the col-* classes.
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
I am trying to make my application more beautiful thanks to Bootstrap,
I am currently trying to center a "card" from Bootstrap
I found a way to do it with mx-auto
My code with mx-auto only works in JSFiddle
<div class="card text-white bg-info mx-auto" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
But in my application the card is not centered, does anyone have any idea why this is happening?
The bootstrap version I embedded to my Angular project is 4.1.2
Here is the way I embedded Bootstrap to my angular project :
I used
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
Then i added to my angular.json
"./node_modules/bootstrap/dist/css/bootstrap.css" to the styles
And
"./node_modules/bootstrap/dist/css/bootstrap.css" to the styles
"./node_modules/jquery/dist/jquery.min.js" to the scripts
"./node_modules/popper.js/dist/umd/popper.min.js" to the scripts
"./node_modules/bootstrap/dist/js/bootstrap.min.js" to the scripts
Have you tried to use a row and column with the class justify-content-center:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card text-white bg-info">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
In bootstrap 4, you have inbuild CSS 'text-center' so, you can use it on any div class to center the content
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="card text-white bg-info mx-auto text-center" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-center">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
Maybe you forgot to include one of required files. Do you have all of these?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>