how to make it responsive please ? bootstrap - css -html - css

im working on a portfolio website and i have a bug on my code, i want to put footer under card pricing. thank you.
https://i.stack.imgur.com/qYMvd.jpg
HTML :
FOOTER SECTION :
<footer class="footerP">
<div class="container-fluid">
<div class="row">
<div class="small-footer col-12 col-lg-12">
<div class="footer-title col-12 col-lg-6">
<h3>PASTEUR SERVICE STATION</h3>
</div>
<div class="footer-social hidden-md-down col-lg-6 text-right">
<ul id="menu">
<li>
<a href="#">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="big-footer">
</div>
</div>
</div>
</footer>
CSS CARD :
.card{
max-width: 300px;
height: auto;
border-radius: 15px;
padding: 40px 20px;
margin: 0 auto;
box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
transition: .5s;
overflow: hidden;
}
FOOTER CSS :
.footerP .small-footer{
width: 100%;
height: 40px;
background: #232323;
}
thank you guys for help.

Wrap the whole thing in a footer tag and assign a class of "footer" (the Bootstrap default class).
<footer class="footer">
<div class="container-fluid">
<!--Rest of your code --!>
The default Bootstrap .footer will keep it full width and sticky to the bottom of the page.

Related

How to achieve this layout properly?

I want to have list items with a layout like below, with a circle that has an image, at right of the circle a title, the date of the post and then the category of the post. And at right of the list item should appear the button.
I have this code to achieve this layout using flexbox: http://jsfiddle.net/muLh5v4n/2/. But its not working properly, the title, post date and category are not at the right of the image, are below the image.
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group list">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group list_search">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="post-info">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
</li>
<li class="list-group-item">item2</li>
<li class="list-group-item">item3</li>
<li class="list-group-item">...</li>
</ul>
</div>
</div>
</div>
</div>
This is another aproach.
ul {
list-style-type: none;
width: 500px;
border: 1px solid gray;
margin: 0;
padding: 0;
}
.picture_round{
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
margin-left: 20px;
object-fit: cover;
object-position: center;
display: block;
}
.dsp_flex {
display: flex;
justify-content: center;
align-items: center;
}
.middle_section{
flex: 1;
text-align: left;
}
ul li button{
margin-right: 20px;
}
ul li{
padding: 10px 0px;
border-bottom: 1px solid blue;
}
.title {
text-transform: uppercase;
font-weight: bolder;
}
.category{
border: 1px solid gray;
border-radius: 10px;
display: inline-block;
padding: 5px 2px;
}
<ul>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">titletitle title</div>
<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
<div class="category"> categorycategory </div>
</div>
<button>Button</button>
</div>
</li>
</ul>
You can try using this; you can further style the elements; but basically this component should display as you intend. Also this is using only Bootstrap Classes, custom css is only for the example.
.list-item {
max-width: 450px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-item border d-flex align-items-center">
<div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
<div class="ml-2">
<h3>Title</h3>
<p>some-text</p>
<span>Span</span>
</div>
<div class="ml-auto mr-2"><button>Button</button></div>
</div>
Bootstrap 4 has a class called .flex-row that we can use.
Lets do this using only Bootstrap classes and flex.
1. Add flex-row class to the list-group-item.
2. Add d-flex to post-info.
3. Place the text into a d-flex flex-column div.
<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<div class="d-flex flex-column">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
JSFiddle: http://jsfiddle.net/muLh5v4n/13/
You can later on use Bootstraps built in padding classes to make it space out nicely.

How to make navbar-item dropdown always visible and active only with hover in bulma

In bulma navbar I have a logo on the left and one dropdown menu on the right. I want to make the menu always visible and only open on hover. Right now when the screen size in smaller than 1088px, the dropdown menu opens automatically on the right.
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-expanded">
<a class="navbar-item" href="#">
<img src="img.png" width="131" height="35">
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.7.1
</div>
</div>
</div>
</div>
</div>
</nav>
maybe this will help you
.navbar-dropdown {
background-color: white;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
display: none;
font-size: 0.875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 20;
}
.navbar-item:hover .navbar-dropdown{
display: block;
}
#media screen and (max-width: 1088px){
.navbar-dropdown{
display: none;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" media="all" />
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-expanded">
<a class="navbar-item" href="#">
<img src="img.png" width="131" height="35">
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version 0.7.1
</div>
</div>
</div>
</div>
</div>
</nav>

How to adjust width of right-aligned navbar

Link to jsfiddle: https://jsfiddle.net/ckmmd5aL/
This is my bootstrap HTML
<div class="img-full">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img class="img-responsive" src="images/oj_menu_heading.png" />
<!--a class="navbar-brand" href="#" style="color: white;">Parwest</a>
<a class="navbar-brand" href="#" style="color: white;">Group</a-->
</div>
<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav">
<li><img class="img-responsive" src="images/oj_menu_organisation.png" style="width:80%; height:80%"/> <!--a href="#" style="color: white;">Organisation Profile</a-->
</li>
<li><img class="img-responsive" src="images/oj_menu_projects.png" style="width:80%; height:80%"/>
</li>
<li><img class="img-responsive" src="images/oj_menu_news.png" style="width:80%; height:80%"/>
</li>
<li><img class="img-responsive" src="images/oj_menu_contact.png" style="width:80%; height:80%"/>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
and this is the css
.img-full {
height: 450px;
background-image: url('images/oj_header.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar {
margin-top: 20px;
background: no-background;
}
.navbar.navbar-default {
background-color: transparent;
border-color: transparent;
}
and this gives me this result
but I want to reduce the gap between the right navbar items such that I get this layout
Can anyone please tell me how to reduce the gap and further right align the navbar items to get the required layout?
Any help would be appreciated. Thanks in advance.
I'd use Bootstrap's grid as it was intended.
<div class="col-sm-4">
Logo
</div>
<div class="col-sm-8">
Navbar
</div>
Demo
In addition, I've removed the nested container and applied top positioning to the background image.

Aligning social media icons and placing them in the centre of the page

I have a set of social media icons in one row that keep aligning to the left on wider breakpoints.
I would like them to be in the middle of the page when on wide breakpoint.
Also, on smaller breakpoints they turn into a vertical column and appear on top of each other. Is there a way to align them in one row horizontally and centrally on the page on smaller break points as well?
I have tried the following but its still not helping.
#media screen and (min-width: 320px) {
#social {
display: inline-block;
}
}
The following is the html that I see in the template:
<div id="social">
<div class="container">
<div class="row centered">
<div class="col-lg-2">
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
</div><!-- --/row ---->
</div><!-- --/container ---->
</div>
Any suggestions? Thanks in advance!
Instead of aligning them in separate divs use unordered lists as follow:
HTML
<div id="social">
<div id="container">
<ul>
<li>
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
And here is the CSS part
#social #container {
text-align: center;
}
#social #container ul {
float: left;
}
#social #container ul li {
float: left;
padding-left: 10px;
list-style-type: none;
}
And for making the image to be aligned horizontally even in a smaller screen you need to give a percentage width or height to not move down.

Bootstrap creating extra padding on column in row

Let me preface this by saying I am relatively new to bootstrap and possibly not udnerstanding the row/column layouts properly.
The layout I am working on can be seen here: http://jsfiddle.net/5NFXY/ (code pasted below)
The 'sidebar' on the right is where the problem is occurring. I have a .col-md-9 and a .col-md-3 enclosed withing a .row, but for some reason the right side of the sidebar is not lining up properly with its container. After playing around with this for quite some time I have found that if I remove margin-right: -15px; from the .row the problem goes away, but surely this isn't' the proper solution and I have mucked something up along the way. My question is, have I done something wrong in my HTML or is the proper solution really to manually override that margin-right: -15px;?
HTML
<body>
<div class="container">
<div class="logo-header">
<h1>Header</h1>
<h4>Subheader</h4>
</div>
<div class="inner-container clearfix">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Operations <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Get Started</li>
<li>Start New</li>
<li>View All</li>
<li class="divider"></li>
<li class="dropdown-header"> Settings</li>
<li>Manage Types</li>
<li>Manage Types</li>
</ul>
</li>
<li class="dropdown">
Utilities <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forums</li>
<li class="divider"></li>
<li>Distance</li>
</ul>
</li>
<li class="dropdown">
Administration <b class="caret"></b>
<ul class="dropdown-menu">
<li>News</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Alts <b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row">
<div class="col-md-9">
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<div class="col-md-3 wrath-content-box">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<footer class="wrath-content-box">
Footer tagline ©
</footer>
</div> <!-- /inner-container -->
</div> <!-- /container -->
</body>
CSS
body {
padding-top: 20px;
padding-bottom: 20px;
background: url('../img/wh-background-1.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
margin-bottom: 20px;
}
.logo-header {
color: #FFF;
}
.logo-header h1 {
margin-bottom: 0;
}
.logo-header h4 {
margin-top: 0;
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.inner-container {
background: rgba(119, 119, 119, .5);
border-radius: 6px;
padding: 20px;
}
.wrath-content-box {
border-color: #e7e7e7;
background-color: #f8f8f8;
border-radius: 6px;
padding: 15px;
}
.news-post {
margin-bottom: 20px;
}
Using: Bootstrap 3.0.3 + Jquery 1.10.1
You've combined your custom class wrath-content-box with the bootstrap col-md-3 class and the padding on your class is overriding the Bootsrap grid padding.
You just need to put your class in a separate <div> inside the bootstrap one like you did in the first column.
<div class="col-md-3">
<div class="wrath-content-box">
...
</div>
</div>
Demo

Resources