I have added two columns within the container but would like the .company and .copyright text at the bottom left of the footer in the column. The Follow Us heading should be on the right with the .justify-text underneath it followed by social media elements. Thanks!
.footer {
background-color: $pink;
padding-top: 20px;
text-align: left;
color: $white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row justify-content-between">
<div class="col-sm-7">
<h5>Programme</h5>
<p class="company">This is text.</p>
<p class="copyright">© 2023 Blah Blah Blah</p>
</div>
<div class="col-sm-4">
<h5>Follow Us</h5>
<p class="justify-text">Join our socials and stay tuned.</p>
</div>
</div>
</div>
</div>
Try the following. The description wasn't clear to me, so let me know if you want anything changed.
.footer {
background-color: $pink;
padding-top: 20px;
text-align: left;
color: $white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row justify-content-between">
<div class="col-sm-7">
<h5>Programme</h5>
<p class="company pt-5">This is text.</p>
<p class="copyright">© 2023 Blah Blah Blah</p>
</div>
<div class="col-sm-4 text-center">
<h5>Follow Us</h5>
<p class="justify-text pt-5">Join our socials and stay tuned.</p>
<ul class="list-unstyled p-0 d-flex justify-content-around">
<li>Icon 1</li>
<li>Icon 2</li>
<li>Icon 3</li>
<li>Icon 4</li>
</ul>
</div>
</div>
</div>
</div>
Related
I have the following jumbotron:
Created via:
<div class="col-sm-2">
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">Initiatives</h1>
<p class="lead">The other good stuff.</p>
<ul>
<li>
Start an Initiative »</li>
<li>
More Information »</li>
</ul>
</div>
</div>
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">News</h1>
<p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
Try it out »
</div>
</div>
</div>
I want an icon on the red square. How can I add and align it to my h1, display-6?
.col-sm-2 > div:first-child .display-6::after{
content: "" ;
width: 40px;
height: 40px;
background-color: red;
display: block;
margin-left: 20px;
}
.col-sm-2 > div:first-child .display-6{
display: inline-flex;
}
<div class="col-sm-2">
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">Initiatives</h1>
<p class="lead">The other good stuff.</p>
<ul>
<li>
Start an Initiative »</li>
<li>
More Information »</li>
</ul>
</div>
</div>
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">News</h1>
<p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
Try it out »
</div>
</div>
</div>
I want to place 2 links on the left and 1 on the right side under some images.
The images are all different sizes and everything in my main div is centered.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" height="484" width="700">
<p class="text-left">
FHD Ansicht |
4K Ansicht
</p>
</div>
</div>
</section>
</main>
At the moment i did set the paragraph under the image to the width of the image:
And it looks like this with text only on the left side:
What i need is:
I guess a figure around the image and the text inside it is part of the solution.
Whats the best way doing it in the latest bootstrap?
Try playing with this snippet:
<main class="container-fluid">
<div class="row">
<img class="col-md-12" src="#" alt="test" style="background-color: blue; height: 400px;">
</div>
<div class="row subtitle-container">
<div class="col-md-10 left-subtitle">
Some Text | Some Text
</div>
<div class="col-md-2 right-subtitle">
Some Text
</div>
</div>
</main>
You can use float-left and float-right bootstrap classes to get texts to the left and right.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" class="w-100" height="484" width="700">
<div class="text-center clearfix">
FHD Ansicht
<span class="float-left mx-2">|</span>
4K Ansicht
<!-- <span>|</span> -->
another link
</div>
</div>
</div>
</section>
</main>
My icons keep going to the left:
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-cloudy-outline icon-large"></i>
<h3>Web development</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-bolt-outline icon-large"></i>
<h3>Learning new tech</h3>
</div>
</div>
</div>
</section>
Css:
.icon-large{
font-size: 350%;
text-align: center;
margin: 0 auto 10px auto;
color: #e74c3c;
}
I do not want to use Bootstrap glyphicons, the ionicons fonts look much better to me.
The icons appear to the far left as if there is code that is set to float: left.
Try putting the text-align:center on the parent div...
You icons are display:inline by default so aren't affected by margin.
.icon-large {
font-size: 350%;
color: #e74c3c;
}
.col-md-4 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
</div>
</div>
</section>
I am trying to centre the text in this example but it doesnt seem to be possible
<div class="col-md-10">
<br>
<br>
<div class="navbar navbar-default">
<div class="container">
<p style="font-size: 12pt;" class="navbar-text"><strong>Centre this Text</strong>
</p>
</div>
</div>
</div>
You have to change the float:left to float:none since this is inside a navbar.
See example Snippet.
.navbar.navbar-default p.navbar-text {
text-align: center;
float: none;
font-size: 12pt;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="navbar-text"><strong>Centre this Text</strong>
</p>
</div>
</div>
</div>
</div>
It's worked
<div class="col-md-10">
<br>
<br>
<div class="navbar navbar-default">
<div class="container">
<p style="font-size: 12pt;" class="navbar-text" align="center"><strong>Centre this Text</strong>
</p>
</div>
</div>
</div>
Or add .navbar.navbar-default .navbar-text { text-align: center; } to your stylesheet
I've got such header on the page
But I want to align it like this
How to do that? My html code looks like this
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#mytab a:last").tab("show")
});
</script>
<style>
.blackie {
background: black;
color: white;
}
.header {
font-size: 25px;
}
.column {
text-align: center;
}
.line {
border-right: 1px solid white;
}
</style>
</head>
<body>
<div class="row blackie">
<div class="col-md-1">
<img src="eng.png" width="40px" height="40px"/>
</div>
<div class="col-md-2 header">Admin</div>
<div class="col-md-1 col-md-offset-3">
<span class="line"></span>
</div>
<div class="col-md-2">
email
</div>
<div class="col-md-1">
<span class="line"></span>
</div>
<div class="col-md-1 column">
<span class="logout">
Log out
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist" id="mytab">
<li class="active">Liabilities</li>
<li>Events</li>
<li>Reports</li>
<li>Admin</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<p>Liabilities</p>
</div>
<div id="tab2" class="tab-pane">
<p>Events</p>
</div>
<div id="tab3" class="tab-pane">
<p>Reports</p>
</div>
<div id="tab4" class="tab-pane">
<p>Admin</p>
</div>
</div>
</div>
</div>
</body>
</html>
Here you are http://jsfiddle.net/7ky948j3/2/embedded/result/
You have the problem with padding, every col-md class has padding left nad right 15px, the image in the first col is smaller than the width of the col-md-1 class so it pushes the admi further to the right. If you add the image and Admin in the same col-md the problem will be fixed
<div class="col-md-3 header">
<img src="eng.png" width="40px" height="40px" /> Admin
</div>
Use CSS Pseudo classes which makes your work easy. here your output
use first-child Pseudo class for these need
here the html
<div class="row blackie">
<div class="col-md-1 col-sm-1">
<img src="eng.png" width="40px" height="40px"/>
</div>
<div class="col-md-11 col-sm-11 col-xs-11"> <!-- cols depends upon ur nees" -->
<ul class="main-head">
<li>
Admin
</li>
<li>
Email
</li>
<li>
logout
</li>
</ul>
</div>
</div>
and the css
ul.main-head{
display:inline-block;
width:100%;
padding:0px;
margin:0px;
vertical-align:middle;
}
ul.main-head:after{
clear:both;
content:" " ;
display:table;
}
ul.main-head li{
float:right; //floats every element to right side
text-align:right;
list-style:none;
}
ul.main-head li:first-child{
float:left; //make the first element to float left
}
ul.main-head li a{
color:#fff;
}
and line-heights and left right margins as your need to 'li' of the topbar for better results.