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
Related
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>
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>
Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
I'm using bootstrap and I'm trying to align the stuff inside my row. I realize that I haven't used up all the column space, and that's fine. I just want the stuff centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
#take-from-break, #take-from-session {
float: right;
}
</style>
<html>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="row">
<div class="col-md-1"><button id="take-from-break">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Break Length"></div>
<div class="col-md-1"><button id="add-to-break">+</button></div>
<div class="col-md-2"></div> <!-- blank space -->
<div class="col-md-1"><button id="take-from-session">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Session Length"></div>
<div class="col-md-1"><button id="add-to-session">+</button></div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
</html>
Here is the JSFiddle: https://jsfiddle.net/c8wLxkob/
And here is the image of the page that I get:
Since it doesn't look like you're using Bootstrap to size your columns in particular, one way to center-align your boxes is to use display: flex along with justify-content: center. I've retained the Bootstrap sizing in the spacer, so the result is still responsive.
Screenshot of result:
Here is a demo to show what I mean:
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
.wrap {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="wrap">
<div class="center-wrap">
<button id="take-from-break">-</button>
<input type="number" placeholder="Break Length">
<button id="add-to-break">+</button>
</div>
<div class="col-md-2"></div>
<div class="center-wrap">
<button id="take-from-session">-</button>
<input type="number" placeholder="Session Length">
<button id="add-to-session">+</button>
</div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
JSFiddle Version: https://jsfiddle.net/re8jzxer/