I'm quite new to learning Bootstrap, but I have some trouble aligning my icon on the same line as my .
What it looks like right now..
I've been trying to fix it within the container, but also with rows, columns and several aligning methods.
This is my code right now:
<div class="container">
<div class="row">
<div class="col">
<h1 class="mb-3 ml-5">Products</h1>
<button class="filterIcon navbar-toggler float-right align-self-start" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
Can someone show me what I'm doing wrong? I can't really seem to find the answer in documentation as well. If someone does have documentation, please show me so I can learn from it :).
Thank you!
You can use a flex layout to get the items aligned side by side and in the center vertically. For bootstrap, this means using the classes d-flex and align-items-center
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col d-flex align-items-center">
<h1 class="m-0" style="flex-grow:1;">Products</h1>
<button class="filterIcon navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
Related
I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problemthe second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Expected behaviour
HTML Tree
Example snippet
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>
h-100 is working as expected, because the height is 100% of the childs inside. It is not usable to stretch a div to its parent height.
You could use flex, to make it work right
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-stretch border border-primary">
<div class="flex-grow-1">
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
<div class="d-flex flex-column bg-danger">
<div class="flex-grow-1">
<button class="btn btn-sm">...</button>
</div>
<div>
<button class="btn btn-sm">BTN2</button>
</div>
</div>
</div>
</body>
</html>
I'm trying to get some buttons to work in Bootstrap 5:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn-primary">0000</a>
<button class="btn-primary">0000</button>
</div>
</div>
</div>
But the styles aren't being applied correctly, the buttons appear to be missing the rounded corners and the padding:
I'm only loading the styles from <link href="css/bootstrap.min.css" rel="stylesheet"> which I'm pretty sure is what I always do.
Change class class="btn-primary" to class="btn btn-primary"
Need to btn align with other custom bootstrap classes. Read about buttons here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn btn-primary">0000</a>
<button class="btn btn-primary">0000</button>
</div>
</div>
</div>
It misses the "btn" class.
asdasda
you forgot the btn class
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn btn-primary" role="button">0000</a>
<button class="btn btn-primary">0000</button>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.5/components/buttons/
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Button tags
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
I'm trying to center a FontAwesome icon in the center of an Image Overlay Card and I'm being unable to center it vertically.
I've tried multiple other suggestions such as using d-flex and justify-content-center but none seem to work. What am I missing?
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<div class="card bg-dark text-white">
<img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
<div class="card-img-overlay text-center">
<i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
</div>
</div>
</body>
I want the icon to be centered in the middle of the image, but can only align it horizontally and not vertically. Thank you for your help.
You can add d-flex class to your .card-img-overlay element, then add class="align-self-center mx-auto" to the inner a element:
<div class="card bg-dark text-white">
<img class="card-img" src="images/example.jpg" alt="Example">
<div class="card-img-overlay d-flex">
<a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
More info about align-self-center on official BS4 doc: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
You can use bootstrap flex utilities class on card-img-overlay element :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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">
<div class="card bg-dark text-white">
<img class="card-img" src="https://fakeimg.pl/250x100/000000/" alt="Example">
<div class="card-img-overlay text-center d-flex flex-column justify-content-center">
<a data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="">
<i class="fab fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
Your first attempt was correct (Adding d-flex and justify-content-center class). You just forgot to also add align-items-center class.
I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
Ivan
Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.
You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/
You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/
I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.
This is with respect to bootstrap 3
<!DOCTYPE html>
<html>
<head>
<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>
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
</body>
</html>
If you are using Bootstrap 4
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.
This question already has answers here:
Bootstrap xs columns wrap
(2 answers)
Bootstrap grid with fixed wrapper - Prevent columns from stacking up
(1 answer)
Closed 4 years ago.
All OK: http://prntscr.com/iqo8f7
When I make width smaller: http://prntscr.com/iqo8nj
My button on the right is not responsive. It's ok if the width is big, otherwise it doesn't seem to resize correctly.
Any idea why?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-11">
<h5 class="inline" style="vertical-align: sub"> Status: </h5>
<span class="label label-warning label-lg-status">In Progress</span>
<hr>
</div>
<div class="col-sm-1">
<button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
</div>
</div>
The main issue comes from the bootstrap column settings needed. If you follow the doc, you have to set all your <div class="row"> inside a <div class="container"> or a <div class="container-fluid">
so if you do the good way it's working well :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-11">
<h5 class="inline" style="vertical-align: sub"> Status: </h5>
<span class="label label-warning label-lg-status">In Progress</span>
<hr>
</div>
<div class="col-sm-1">
<button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
</div>
</div>
</div>