I want clear space form my HTML code.
<div class="row">
<div class="col-xs-1">
<img src="~/Content/assets/images/male.jpg" style="height:35px;" class="img-responsive" alt="Cinque Terre">
</div>
<div class="col-md-10">
<p class="pull-left text-primary text-capitalize text-weight-bold">Deneme</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</div>
</div>
I don't think it is possible because the space between the user image and the username is default by the bootstrap grid system.
By the way, you have a col-xs-1 and a col-md-10 in one row, I don't know for sure if that is 100% right...
Related
I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com
In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.
How do I keep the cards at the same height and keep the buttons aligned at the bottom?
Thank you!
You can play around with flex CSS. Let me demo to you by using back your code.
add .h-100 to .card
add .d-md-flex and .flex-column to .card-body
add .flex-grow-1 to .card-text
Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.
You can refer this page for full capability of flexbox for Bootstrap 5.
Hope it helps.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I am trying to learn bootstrap. I took the code from the bootstrap docs for the 'Flush' Accordion but mine just looks completely wrong. I don't understand why. I've linked the CSS stylesheet and the JS Bundle. This is what it looks like.
I haven't tampered with the default code at all. I don't understand what I am doing wrong. Any help appreciated, thank you.
Here is my code: (the accordion is at the very bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-2 fixed-top">
{ }
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Courses
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<section class="bg-white text-light p-5 p-lg-0" id="home">
<div class="container">
<div class="d-sm-flex align-items-center">
<div class="text-center text-sm-start">
<h1 class="text-dark">Become a <span class="text-primary">Web Developer</span></h1>
<p class="lead text-dark">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste labore voluptatum nisi non error
impedit alias ullam. Sint numquam quae minus quam, aut rem, sed officiis inventore consectetur
eveniet veniam.
</p>
<button class="btn btn-primary btn-lg">Start Now</button>
</div>
<img src="/images/home.jpg" class="img-fluid w-50 d-none d-md-inline-block" alt="Responsive image">
</div>
</div>
</section>
<section class="bg-dark text-light p-5">
<div class="container d-flex justify-content-center">
<div class="d-md flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0 pb-2">Sign Up For Our Newsletter</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Email" aria-label="Enter email"
aria-describedby="button-subscribe">
<button class="btn btn-primary" type="button" id="button-subscribe">Subscribe</button>
</div>
</div>
</div>
</section>
<section>
<div class="pt-5" id="courses">
<div class="container">
<div class="row text-center">
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybird</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In-Person</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container text-center">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="/images/learn.jpg" alt="Learn image" class="img-fluid w-100">
</div>
<div class="col-md p-5">
<h2>Learn The Fundamentals</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
</div>
</div>
</section>
<section class="bg-dark">
<div class="container text-center">
<div class="row align-items-center justify-content-between text-light">
<div class="col-md p-5">
<h2>Build Projects</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
<div class="col-md">
<!-- <img src="" alt="Learn image" class="img-fluid w-100"> -->
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h1 class="text-center">Frequently Asked Questions</h1>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this would
look in a real-world application.</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
This is because you have bootstrap#4.0.0 in your link and in the script below you have bootstrap#5.1.3
Replace your link at the top with this one
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
That should make work your Accordion
I have run into a problem when trying to code my semester project.
I'm trying to center all of this content right in the middle of the bootstrap card but It just can't seem to work:(
If someone can help me I would be really grateful!
Also if I can the card height taller.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card mt-5 container p-5 card-w ">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/600" class="card-img" alt="apples">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
<p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
<div class="container d-flex alignmentcard">
<div class="d-flex mx-3">
-
<p class="pt-2 lead">1</p>
+
<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
</div>
</div>
<div class="container pt-4">
<p>
<a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
More details
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
</div>
</div>
</div>
</div>
</div>
</div>
Try wrapping every piece of your div from the beggining to the end with a <center></center> tag. After that, you would have something like this:
<center>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card mt-5 container p-5 card-w ">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/600" class="card-img" alt="apples">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
<p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
<div class="container d-flex alignmentcard">
<div class="d-flex mx-3">
-
<p class="pt-2 lead">1</p>
+
<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
</div>
</div>
<div class="container pt-4">
<p>
<a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
More details
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
</div>
</div>
</div>
</div>
</div>
</div>
</center>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
I'm trying to make the background image blurry. But keep the content above it visible. I think there's a issue because of making the parent element blurry. How can fix this? Tried couple of steps but it didn't really work.
SO Snippet
#clan-profile {
background-image: url(http://placekitten.com/500/200);
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
/* Safari 6.0 - 9.0 */
filter: blur(5px);
}
<section id="clan-profile">
<div class="container">
<div class="row pt-4 pb-4">
<div class="col-12 col-md-6">
<div class="row pb-1">
<div class="col-12">
<h2>Lorem Ipsum</h2>
<h5>Lorem Ipsum</h5>
</div>
</div>
<div class="row pt-1 pb-1">
<div class="col-12">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
</div>
</div>
<div class="row pt-1 pb-1">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nulla, sed. Sunt, quo reprehenderit cum ut nihil dolor saepe. Culpa at velit, possimus iste eum ipsum similique sapiente neque aliquam.
</div>
</div>
</div>
<div class="col-12 col-md-6 pt-3">
<img src="https://via.placeholder.com/500x200" alt="clan-img" class="img-fluid">
</div>
</div>
</div>
</section>
If possible I would suggest to split up the parent element clan-profile and the background image.
You could do something like:
<section id="clan-profile">
<div class="clan-image"></div>
<div class="container">
<div class="row pt-4 pb-4">
<div class="col-12 col-md-6">
<div class="row pb-1">
<div class="col-12">
<h2>Lorem Ipsum</h2>
<h5>Lorem Ipsum</h5>
</div>
</div>
...
Then you could do the following css:
.clan-image {
background-image: url("...");
/* Add the blur effect */
filter: blur(5px);
-webkit-filter: blur(5px);
}
Then you have a decision to make. You can either make the image absolutely positioned, or you can make the content absolutely positioned. Another solution is to use css-grid, and position the elements on top of each other, because grid allows for this.
Edit:
Added Example: https://jsfiddle.net/dw2Lq0zj/
I would like to have two columns on the main page below the header: one on the left displaying social media (which is working fine) and one on the right displaying a little welcoming blurb. I am using the offset column, but it is still giving a gap. If I increase the offset to 4 to reach of total of 12 for the grid, the blurb moves down as if it is going beyond the 12. I'm not sure what I'm missing here.
This is my first time posting on stackoverflow, so hopefully I am including enough code for the problem. If not, let me know. Thanks!
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<div class="container-fluid">
<section class="social-media col-md-4">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
neon.honey
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
#deephoney
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/facebook.png" alt="Facebook">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Molly
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Neon Honey
</div>
</div>
</section>
<section class="hello col-md-4 col-md-offset-3">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero,
cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit
commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
Make sure you are using the correct window size class:
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
http://getbootstrap.com/css/#grid-options
you can use the offset as well like just to complete the rest of the columns you are not using.
just like the example bellow.
I need to use the .col-xs prefix to satisfy the window size of the snippet.
you can also "force" a div to float right or left in the document.
you will need to read this:
http://www.w3schools.com/css/css_float.asp
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<section class="social-media col-xs-4">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
neon.honey
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
#deephoney
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/facebook.png" alt="Facebook">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Molly
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Neon Honey
</div>
</div>
</section>
<section class="hello col-xs-4 col-xs-offset-4">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero,
cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit
commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
</div>