I am using an AdminLte template, which I use as a layout. In the part where I am going to put the content it is like this:
<div class="content-wrapper">
<section class="content">
#yield('content')
</section>
<!-- /.content -->
</div>
In the view where I have the content to display I have:
#extends('layouts.app')
#section('content')
<div>
<img class="mx-auto my-auto d-block" src="{{ asset('dist/img/logo.png')}}" alt="logo" style="opacity: .2">
</div>
#endsection
When executing, the image of the logo appears centered horizontally, but vertically it appears attached to the upper margin. I've tried various shapes, but can't get it to center vertically. I can't figure out how to fix it. I will appreciate a help.
in Bootstrap 4, you can use .d-flex .align-items-center
https://getbootstrap.com/docs/4.4/utilities/flex/#align-items
The result like this:
<div class="content d-flex align-items-stretch bg-info w-100">
<div class="d-flex bg-info w-100">
<div class="d-flex align-items-center w-100">
<img class="w-100" src="https://via.placeholder.com/800x200">
</div>
</div>
</div>
Here full demo
https://jsfiddle.net/herupurwito/8oq67jcr/3/
Related
I am using this theme: https://themeforest.net/item/memento-multipurpose-funeral-services-html-template/23890802
Can somebody explain me where I start with centering the logo + the menubar?
<section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="d-md-flex justify-content-md-end align-items-md-center">
<div class="mr-auto">
<div class="d-none d-md-flex justify-content-center justify-content-md-start">
<a href="./" class="logo">
<img src="images/logo.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
thanks in advance
If all you want to do is to center the logo your can remove the mr-auto class from the html or this css
.page_toplogo .mr-auto {
margin-right: 0 !important;
}
If you also want to remove those items to the right of the logo, either remove the html or hide them with display: none and replace justify-content-center with justify-content-start to the logo wrapper.
I have the following bootstrap code with two columns as shown below. I would like to have the read more link at the bottom, aligned right. See image.
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you are using Bootstrap 5 you can do it in this way:
Add position-relative in your col, as said by previous answer of Saeed Shamloo:
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
And in the link class add position-absolute bottom-0 end-0 like this:
Read More
In this way you do not have to use external CSS code. You can find more information about bootstrap 5 position classes here.
So finally it will look like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you make the parent element position: relative you can use position: absolute on child elements to position them within the parent element. This example should place the link one font-width away from the bottom right corner of 'container-fluid'.
.container-fluid {
position: relative;
}
.primary-cta {
position: absolute;
right: 1em;
bottom: 1em;
}
For more info, here's a breakdown of CSS Positioning from CSS-Tricks. The link opens to the section on Parent --> Child positioning.
You can do it by adding position-relative to your col and position-abosolute bottom-0 end-0 to your link, like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
So I'm using bootstrap to create an index home page
what I'm trying to do is basically align in the center 2 divs on top of each other :
I have a container-fluid
then a row with 2 cols: in 1 of the cols I have 2 divs that I want to be aligned in the center ( both horizontally and vertically ),
( code is shown below )
here's an illustration :
what I want to do
green is the container-fluid ||
red and blue are the divs I want to be aligned || an orange is a login form I want to add later on
my code goes like this :
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
<div class="col">
<!-- Login form here -->
</div>
</div>
</div>
here's a real picture of the problem
i want the green logo and the writing with the white background to be aligned in the center of the left column
real problem
what I realy want
Add text-center class to divs you want to align center. Shown in below code
<div class="col">
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div class="text-center">
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
This will solve your problem..
add these steps:
HTML
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
css
.col {
padding-left:50px;
}
you can just give "col-md-6" to with column and a "text-align:center;" (horizontal align), and "margin:0 auto". Try this.
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col-md-6" style="text-align:center;">
<div style="float: none; margin: 0 auto;">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
<div>
</div>
<div class="col-md-6">
<!-- Login form here -->
</div>
</div>
</div>
i am new to HTML and i am struggling to understand when and specifically why we use a div inside a div.For example:
<section id="home-bg-parallax" class="h-100 overflow-hidden p-0 w-100">
<!-- BG Parallax -->
<div class="bg-parallax bg-overlay-black-8"></div>
<div class="h-100 left-0 position-absolute top-0 w-100">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-9 col-xl-9">
<span class="font-alt font-w-600 opacity-9-5 letter-spacing-2 text-large
text-uppercase text-white">Welcome To Traversy Media</span>
<h2 class="font-alt font-w-700 letter-spacing-2 m-0 mt-3 text-uppercase
text-white title-xs-extra-large title-sm-extra-large-3 title-extra-large-
4">
Web Development Tutorials & Courses
</h2>
<span class="bg-base-color d-block mt-4 sep-line-extra-thick-long"></span>
</div>
<!-- //.col-lg-9 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</div>
<!-- //.h-100 -->
</section>
This is code from TraversyMedia.com.Maybe this question is dumb but i cannot figure out why we do this.If somebody can help me,i would be grateful.
The uses of the different div tags are to group elements together if they will all share a style or need to be positioned relative to the div they are in. For example, you may have a div for the header bar of your webpage but then have another div inside this so that you can just make adjustments to the navigation part of the header rather than the whole header.
I have minimal CSS and HTML knowledge and would like to achieve the following: I am using a WordPress theme that uses Bootstrap, and I want to create a row with two columns. Left column has an image, right column has a headline that should be vertically centered. I am using a column shortcode
<div class="row">
<div class="col-6">
IMAGE
</div>
<div class="col-6">
HEADLINE
</div>
</div>
Can anyone help me how to center my headline vertically?
Thank you for your help.
If you are using Bootstrap 4. You can use the below snippet
<div class="row">
<div class="col-6">
<img src="" alt="">
</div>
<div class="col-6 d-flex align-items-center">
Your heading
</div>
</div>
If you are using Bootstrap 3.x.x. You can use the below snippet
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
</div>
<div class="col-sm-6 flex-vcenter">
Your heading
</div>
</div>
CSS (only if Bootstrap ver is 3)
.flex-vcenter {
display: flex
align-items: center
}