I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?
...
<div class="row pt-4" id="cards">
<div class="card-deck">
// THIS IS THE CARD WITH THE WIDENED BUTTON
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
// THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
<div class="card-body">
<h5 class="card-title">Spirituality</h5>
<p class="card-text">Connect to something larger than yourself</p>
Set a Goal
</div>
</div>
...
</div>
</div>
...
Here's what the buttons look like:
Just wrap your anchor in another div
<div>
Set a Goal
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<div>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
OR
Just add align-items-center class on the flex div
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To you button class, add mx-auto to center the button and mt-auto to push the button at the bottom of the card.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
How to change columns order on window resize in bootstrap 3 grid?
Here an image what i try to get:
Change bootstrap order on window resize
PROBLEM SOLVED!
CODE:
<div class="row">
<div class="col-lg-2 col-md-6 col-xs-6">Box1
</div>
<div class="col-lg-2 col-lg-push-8 col-md-6 col-xs-6">Box2
</div>
<div class="col-lg-8 col-lg-pull-2 col-md-12 col-xs-12">Box3
</div>
</div>
You can add multiple classes for different window size. use this code in your local html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-lg-4 col-md-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-lg-4 col-md-6" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-lg-4 col-md-12" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
I am trying to build two rows with Bootstrap 4, the one should be displayed on devices with viewport < tablet and the other > tablet. In other words, once the one is visible, the other is hidden. I am using the native d-- classes from Bootstrap 4, but in the > tablet case they break the columns somehow. I am not sure, if it's bug or just me, but I am stick with this for hours. Here is a simple example that I've made to represent the issue.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-block">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
You need to use d-md-flex class because d-md-block override flex property of bootstrap 4.....check this i have added d-md-flex class
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-flex">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
I want to two images diagonally one below another like this, and they should remain like that responsively.
So far I've got this, but the images are moving when I re-size the window and it is not responsive. Is it possible to make it responsive using bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="col-md-8">
<img class="img-responsive" align="left" src="img1.png" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<img class="img-responsive" align="left" src="img2.png" />
</div>
</div>
JS Bin
Use col-*-offset-* instead of aligning left/right. Check below snippet for reference.
.p0 {
padding: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 p0">
<img class="img-responsive" src="http://via.placeholder.com/600x400/green" />
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-6 p0">
<img class="img-responsive" src="http://via.placeholder.com/600x400" />
</div>
</div>
</div>
</body>
</html>
Its hard for me to explaint what i want, so i made a mocup
How to make that with bootstrap 4? So goal is that those 4 elements on the right are all the time (except on mobile) equal height like element on the left (image). Can someone help with that? Here is makrup for now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="http://placehold.it/700x300/ccc/333.png?text=placeholder" alt=""></div>
<div class="col col-md-4">
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
You can use Bootstrap 4's new flexbox utility classes. The d-flex class is used for display:flex, and then flex-column is used to set flex-direction: column..
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="" alt=""></div>
<div class="col col-md-4 d-flex flex-column">
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
</div>
</div>
</section>
</div>
http://www.codeply.com/go/YyTEyi4IcU