I am using a bootstrap to create cards for my site. I am trying to center the card contents of the grid image cards. I have tried applying class="center" into various parts and the items are still all aligned left. This is a snippet of one of the grids
<div class="col">
<div class="card">
<i class="fa fa-medkit fa-5x" aria-hidden="true" class="center"></i>
<div class="card-body">
<h5 class="card-title" >Allied Health</h5>
<p class="card-text" class="center"></p>
</div>
</div>
</div>
I added class="center" and even class="all contents aligned center" into different parts, but there was no change.
Add text-center to the card element.
Also, note that you can only have one class attribute per html element. To add multiple classes to a single element, you separate them with a space.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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">
<div class="col-6">
<div class="card text-center">
<i class="fa fa-medkit fa-5x" aria-hidden="true"></i>
<div class="card-body">
<h5 class="card-title">Allied Health</h5>
<p class="card-text">Some card text here...</p>
Go somewhere
</div>
</div>
</div>
add the attribute display: flexbox; to your div element.
You should add a justify-content-center class in it, to make it center the content in a flexbox way.
I can give you a useful link :center element in bootstrap
Related
I'm trying to center my div content responsively with a sidebar menu and a top menu using bootstrap. But my div content is placed at the bottom of my page when I require the side-menu file and I don't know why. I'm not using any CSS file, just Bootstrap 5.2, but if your solution requires CSS that's okay.
INDEX
<!DOCTYPE html>
<html lang="pt">
<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>TESTE</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/bootstrap.min.css'; ?>">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/all.min.css'; ?>">
</head>
<body>
<!-- NAVIGATION -->
<?php require 'application/views/menu/side-menu.php'; ?>
<div class="container justify-content-center">
<!-- AGENDAMENTOS -->
<div class="row mt-5 me-4">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end agendamentos -->
<!-- FEITOS -->
<div class="row mt-5">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end feitos -->
</div>
<!-- Bootstrap Bundle JS -->
<script src="<?php echo $base_url . 'assets/js/bootstrap.bundle.min.js'; ?>"></script>
<!-- Fontawesome JS -->
<script src="<?php echo $base_url . 'assets/js/all.min.js'; ?>"></script>
</body>
</html>
SIDE MENU
<div class="d-inline-block">
<nav class="bg-dark text-white" style="max-height: 100%; height: 100vw; max-width: 10vw;">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
</nav>
</div>
This is what it was supposed to look like, but with the sidebar:
And this is what happens when I require my sidebar file:
I tried using position-absolute and d-inline-block, which resulted on other pages, but this isn't working on this one
Bootstrap is build on/with Flexbox. So a good solution for you is to use their Flex Utility classes to make the layout.
Explaining the solution
When dealing with elements that should stretch the entire viewport height it's good practice to set a min-height of 100vh to html and body.
Note in the CSS I also added min-height: -webkit-fill-available. They are commented out because they don't work in the iFrame, at least for me they don't. I recommend removing the comment block if you use this code; they're useful because Safari (iOS mostly) handles 100vh a little different than the other browsers which can cause some issues.
I then made the body a flex container so its direct children elements (flex items) will stack horizontally (by default). I used the class d-md-flex so all elements will stack vertically below the medium break point. Use d-flex if you want your sidebar to always stick to the left.
If you don't want body to be flex, a 'wrapper' <div class="d-md-flex">...</div> that spans all the (necessary) elements is a good alternative. Just add the CSS for it, setting it to height: 100%; or 100vh.
Speaking of sidebar; making it flex will now make it stretch the whole viewport, since it's a flex item of a flex container (body) that has a height of 100vh.
And that's it. Snippet is best viewed using the full page option.
html {
/*min-height: -webkit-fill-available;*/
}
body {
height: 100vh;
/*height: -webkit-fill-available;*/
max-height: 100vh;
overflow: auto;
}
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!DOCTYPE html>
<html lang="pt">
<head></head>
<body class="d-md-flex">
<!-- SIDEBAR -->
<nav class="d-flex flex-row flex-column flex-shrink-0 p-3 text-bg-dark" style="min-width: 10vw;">
hello
</nav>
<!-- END SIDEBAR -->
<!-- MAIN -->
<main class="container">
<div class="row mt-5 row-cols-1 row-cols-md-3 g-4 justify-content-center">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27</h4>
</div>
</div>
</div>
</div>
</main>
<!-- END MAIN -->
</body>
</html>
Your card layout
I changed your two cards layout to make it easier to control how they behave, using row columns and the gap g-* utility class. It has no effect on how the sidebar behaves, so if it's of no use; just ignore it.
I am following the examole from the first example on this page https://mdbootstrap.com/components/cards/ (trying to get same output)
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<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
</div>
</div>
<!--/.Card-->
However, all i get is this ? any suggestions
I have added a different bootstrap link, hope this matches with your requirement
Try this
.card-body{
padding: 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<div class="container">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" width="550rem" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<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
</div>
</div>
<!--/.Card-->
</div>
First of all, it's not pure bootstrap, you need add reference to mdb.min.css (you can download it from here).
Second, you need to limit the width of the div. like 300 px as an example (you could change it to whatever you like):
.card{
width:300px;
}
I tried it and can see the card is same as the website.
You didn't set any width in your parent div. that's why div automatically shows full width. First you need to add width like below code or use col-md-*
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css">
<!--Card-->
<div class="card" style="width: 23rem;">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<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
</div>
</div>
<!--/.Card-->
You have to follow the tutorial from getting started they are other css class that comes after content. Eg container-fluid etc. Ensure you follow the tutorial from beginning and ensure your have the library link properly to your page or download it and try it locally. They are classes missing and card class is supposed to have the box-shadow property while container-fluid or content-fluid give the section the appropriate padding. Hope this help
Check the order of files including first of all jquery is required then bootstrap and after that mdb file should be include
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='section'>
<!--Card-->
<div class="card" style='width:23rem;'>
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<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
</div>
</div>
<!--/.Card-->
</div>
</div>
I am trying to make the footer of my website. I want to change the style.
1) Can I create a custom stylesheet and include it into the footer file?
If yes, Do I need to create a new div for any element I want to choose or can use the class provide by Bootstrap?
For example, above I created a div and than in the style file I added #mydiv?
Or there is a better solution?
<div id="mydiv">
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/footer_logo.png"></div>
</div>
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/ico.png"></div>
</div>
<div class="row">
<div class="col-md-4">
xx
xxx
xxx
xxx[enter image description here][1]
</div>
</div>
<div class="row">
<div class="col-md-4">2004-2017. All
rights reserved.</div>
</div>
</footer>
</div>
In addition to Bootstrap classes you can apply your own like
<footer class="container-fluid my-custom-class" style="margin-top: 30px;">
Then just select this class in CSS and apply the styling you need. Be careful, as some attributes (like width ) can be overwritten by Bootstrap.
Hope this helps.
This question already has an answer here:
laravel blade #include not working
(1 answer)
Closed 5 years ago.
I am learning larval and following video on laracasts.com , In lecture 10 regarding layout and structure , I was trying the #include but it is not working .
Below are my files :
/views/layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<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">
<!-- Custom styles for this template -->
<link href=" {{ URL::asset('css/album.css') }}" rel="stylesheet" >
</head>
<body>
<div class="collapse bg-inverse" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
#inlcude('layouts.nav') <!-- This is not working -->
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
Main call to action
Secondary action
</p>
</div>
</section>
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</body>
</html>
/views/layouts/nav.blade.php
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex justify-content-between">
Album
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
/views/posts/index.blade.php
#extends('layout')
Route is properly set:
Route::get('/','PostsController#index');
That's because that file is not in the app/views directory.
When you call #include('layouts.nav'), Blade automatically looks for any file with that name, inside the app/views directory.
Blade looks for the files in the paths array in /app/config/view.php , Adding one more resource path does the trick as following:
'paths' => [
resource_path('views'),
resource_path('/../views/layouts')
],
Basically short information about this situation :
I have a slideshow like this
enter image description here
And front-end developer didn't find the easiest solution so here is the front-end code for background images :
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/4.jpg') }}"> </div>
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/2.jpg') }}"> </div>
</div>
</div>
and here for the centre image :
<div class="item" style="background: url(/dd/img/dd/what/1.jpg) center; background-size:cover;">
<img src="{{ url('/dd/img/dd/what/1.jpg') }}" class="img-responsive hidden-lg hidden-sm hidden-md">
<span class="sml-logo"><img src="{{ url('/dd/img/sml-logo.png') }}" alt=""></span>
<div class="caption left_panel">
<div class="inner">
<p>... The key of the door that will open you to the world of gastronomy and history of modern Baltic cuisine, blending international tendencies and interesting selections of wine.</p>
</div>
</div>
</div>
How you can understand here there is 4 images in this example : the last is 4th.
The centre image is with ID : 1;
I can't make this just based on the ID's from the database because if user will delete some results then +1 -1 will not work for previous and the next image.
Summed up : Basically all I want in this situation is when user clicks on next image the background (left) image changes to the previous centre image and the background(right) side image changes to the next image (3rd) and so on...