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.
Related
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>
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/
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 trying to add a background image for my website, using bootstrap-4 and external css (internal doesn't work for me as well).
I am trying to add image which will be behind all rows which are in a
If i try to use it for a rows inside the container it works, but i wanna the background behind all rows, not just behind one.
Could you help me with that please?
.background {
background-image: url('images/podklad.png') !important;
height: 100%;
}
#top_part {
/*background-color: #ff9900 !important;*/
}
<div class="container-fluid background" >
<div class="row" id='top_part'>
<div class="col-6" >
<div class="d-flex text-center justify-content-center align-items-baseline">
<h1>bla bla<br/>bla bla</h1>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary"><h4></h4></button>
</div>
</div>
<div class="col-6">
<img class="img-fluid" src="images/krabicka.png" alt="">
</div>
</div>
<div class="row" id='top_part'>
<div class="col-12 text-center">
<h2>bla bla</h2>
</div>
</div>
<div class="row" id='top_part'>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/lock80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/gears80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/heart80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
</div>
</div>
It seems that your code worked for me.
Here's a JSFiddle I created with example pictures. You can just replace my example images with yours. Your code correctly places the image behind the container with all of the rows.
If you want the image to be behind literally everything on the page, then change your CSS to look like this:
body {
background-image: url('images/podklad.png') !important;
background-size: cover; /* Resizes the image to cover the entire container */
}
If no image is showing up, then make sure the image paths are correct.
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here