Responsive Bootstrap Carousel - html

I have a web page and I am trying to use a bootstrap carousel. On the first slide there are 3 pictures and on the other slide there is a youtube video embedded to it. The page looks problematic on smaller resolutions.
Here is a how pictures look like on laptop:
pictures on laptop
Here is how youtube video looks like on laptop:
video on laptop
Here is how pictures look like on smaller resolution:
pictures on 320x480
Here is video on smaller resolution:
video on 320x480
Here is video on 360x640:
video on 360x640
Is there a way to make pictures on carousel display on the center when it is smaller resoultion? And of course for the youtube video as well. The video is not on the center and exceeds the screen.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row item active">
<div class="bannerImage">
<a href="#"><img src="images/waspmote_pro_t.png" alt="">
</a>
<a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
</a>
<a href="#"><img src="images/u13_gw_t.png" alt="">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Ultra low power (0.7uA)</li>
<li><i class="fa fa-check-circle"></i> 100+ Sensors available</li>
<li><i class="fa fa-check-circle"></i> Over the Air Programming (OTA)</li>
<li><i class="fa fa-check-circle"></i> Encryption Libraries (AES, RSA)</li>
<li><i class="fa fa-check-circle"></i> Encapsulated line available</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Industrial Protocolos: RS-232,RS-485,Modbus,CAN Bus, 4-20mA</li>
<li><i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide1 -->
<div class="row item">
<div class="bannerImage">
<a href="#"><img src="images/waspmoteps01.png" alt="">
</a>
<a href="#"><img src="images/waspmoteps02.png" alt="">
</a>
<a href="#"><img src="images/waspmote03.png" alt="" class="righter">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-bolt"></i> Easy and fast deployment</li>
<li><i class="fa fa-money"></i> Minimum maintenance costs</li>
<li><i class="fa fa-exchange"></i> Services/network scalability</li>
<li><i class="fa fa-cloud"></i> Any Cloud platform compatible</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Integrating more than 80 sensors</li>
<li><i class="fa fa-check-circle"></i> Robust waterproof IP65 enclosure</li>
<li><i class="fa fa-check-circle"></i> Add/change sensor probe in seconds</li>
<li><i class="fa fa-check-circle"></i> Solar powered internal and external panel</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Over the air programming (OTAP)</li>
<li><i class="fa fa-check-circle"></i> Graphical/intuitive programming interface</li>
<li class="space"><i class="fa fa-check-circle"></i> ZigBee, 802.15.4, 868, 900, LoRaWAN, LoRa, Sigfox, WiFi, 3G/GPRS and Bluetooth Low Energy</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide2 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="270" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>The new Waspmote Plug & Sense! line allows developers to forget about electronics and focus on services and applications. Now you can deploy wireless sensor networks in a easy and scalable way ensuring minimum maintenance costs. The new platform consists of a robust waterproof enclosure with specific external sockets to connect the sensors, the solar panel, the antenna and even the USB cable in order to reprogram the node. It has been specially designed to be scalable, easy to deploy and maintain.</p>
</div>
</div>
</div>
</div>
<!-- /Slide3 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="284" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Events Sensor Board</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>More than 50 available sensors for the Waspmote platform. Values from the temperature, humidity, tilt, vibration, water, PIR, bend sensors integrated in the Events Sensor Board are sent using the 802.15.4/ZigBee radio.</p>
</div>
</div>
</div>
</div>
<!-- /Slide4 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div>
<!-- /.control-box -->
</div>
<!-- /#myCarousel -->
</div>
<!-- /.span12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
CSS
div {
word-break: break-all;
}
img {
max-width: 100%;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 8 */
filter: alpha(opacity=50);
/* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #fbf4e0;
margin: 40px auto 10px;
padding: 20px 0px;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #000;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 10px 0px;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.caption .span4,
.caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #000;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
font-weight:bold;
}
.caption p {
font-size: 1rem;
line-height: 1rem;
color: #000;
}
.caption ul{
color: #000;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer,
.footer a {
color: #fff;
}
p.right {
float: right;
}
::selection {
background: #ff5e99;
color: #FFFFFF;
text-shadow: 0;
}
::-moz-selection {
background: #ff5e99;
color: #FFFFFF;
}
a,
a:focus,
a:active,
a:hover,
object,
embed {
outline: none;
}
:-moz-any-link:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
.bannerImage img {
margin-left: 10%;
}
.bannerImage iframe{
margin-left: 25%;
margin-right: 25%;
}
.waspmote{
font-size:13px;
}
.waspmoteps{
font-size:13px;
}
.space{
margin-bottom:34px;
}
.righter{
margin-left:18% !important;
}
edit 1: Here is what happened after media screen addedtexts under pictures are not display on the screen.
media screen
edit 2: Actually this markup works for pictures in the slide but still texts under the pictures are not visible in smaller resolutions.
<div class="bannerImage">
<div class="row productsRow">
<div class="col-md-4">
<img src="images/waspmoteps01.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmoteps02.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmote03.png" alt="" class="righter">
</div>
</div>
</div>
CSS:
.productsRow {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
Edit 3: JSFiddle added:
JSFIDDLE
EdiT 4: After removing the height, the videos are not centered.
enter link description here
EdiT 5: Changing the iframe CSS worked for small resolutions. But for 768x1024 and 800x1280 portrait resolutions texts under pictures exceeds the screen.
part1: 768x1024_part1
part2: 768x1024_part2
Edit 6: The PC/Laptop resolution breaks.
sample
EdiT 7: Carousel starts on the main page automatically on IE 11 but supposed to be sliding on the active page!? Any ideas?
Here is the Jquery:
// Carousel Auto-Cycle
$(document).ready(function () {
$('.carousel').carousel({
interval: 6000
})
});

The solution is not perfect, but I hope it also helps you.
For your container .bannerImage I defined width:100%; than you can achieve the
responsiveness of your website.
#media queries: To set the size of the images to 100%, if the screen resolution is lower than 1024px.
CSS
.bannerImage img {
width: 25%;
}
.bannerImage{
padding-left: 15%;
padding-right: 15%;
width: 100%;
height: auto;
}
.bannerImage iframe{
width: 100%;
}
#media screen and (max-width: 1024px){
.bannerImage img {
width: 100%;
}
}
jsfiddle
EDIT 1
Remove the height: 140px; on line 1430, after than your text will be shown in full height.
EDIT 2 UPDATE
So there was still an issue with the iframe pic, but this should fix it:
CSS
.bannerImage iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:80%;
height:100%;
}
.iframeImage{
position:relative;
padding-bottom:44.25%;
height:0;
left: -15%; //for centering the iframe
}
HTML
<div class="bannerImage iframeImage">
...
</div>

Have you tried img-responsive class for images and embed-responsive class for video content? these are classes for responsive media content
Check this for images and this for video content

Related

Div's content not being contained and is overlapping (Bootstrap, Css, MVC)

I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?

Bootstrap icon wrong positioning

I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle

Can't seem to get two elements to be side-by-side

Here is what my webpage looks like:
As I highlighted in the picture, I'm trying to move the balance element to the right side.
I am trying to use the display:inline-block tag to do this.
Here is my CSS and HTML... what am I doing wrong?
CSS:
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
/* Balance box */
.balance{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
HTML:
<body>
<div class="noselection">
<ul class="topnav">
<li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Deposit</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</li>
<li><i class="fa fa-university" aria-hidden="true"></i>Faucet</li>
<li><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</li>
<?php echo $accountButton; ?>
<li class='right' id="top-balance"><a href=''></a></li>
</ul>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">That bet is not a valid bet.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeydown="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">That is not a valid chance.</span>
</span>
<br>
<h3 id="payout">Payout: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
</div>
<?php echo $script; ?>
</body>
UPDATE:
Reducing the .balance width to 40% fixed the issue, but how can I now force it up?
Try this code
add box-sizing: border-box; property to both the classes.
CSS
.gamebox, .balance{
box-sizing: border-box;
}
hope this helps..
you are looking for below structure,
what happens here is when you apply fixed width to div and them apply padding and margin so your element width gets increased
so better you create another child container and assign padding margin over there
.gamebox, .balance{
width: 50%;
float: left;
height: 100px;
}
.gamebox-inner, .balance-inner{
border: 1px solid red;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
<div class="gamebox">
<div class="gamebox-inner">
a
</div>
</div>
<div class="balance">
<div class="balance-inner">
b
</div>
</div>
You can try flexbox as follows.
<div id="container">
<div class ="first">first</div>
<div class="second">second</div>
</div>
#container {
width: 200px;
height: 300px;enter code here
border: 1px solid black;
backgroud-color:red;
display:flex;
}
.first {
background-color:blue;
width:50px;
height:50px;
flex:1;
}
.second {
background-color:green;
width:50px;
height:50px;
flex:2;
}

Navbar doesn't changes color when scroll down

Even though the same code works fine on codepen it doesn't on a local file. The navbar suppose to be transparent when on top but should turn to black when I scroll down. I suspect that it might be the way I link bootstrap and the other external files but the issue might be on the navbar.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" 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="#bs-example-navbar-collapse-1"> <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="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br>
but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about"><a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown Act, and government and municipal litigation.<br>
<br>
Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br>
Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles Editor of the Hastings International and Comparative Law Review.<br>
<br>
Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County Bar Association.<br>
<br>
Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service"><a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br>
High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br>
Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations, high net worth individuals, government and quasi government bodies).<br>
<br>
A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br>
The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10"> <a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work, impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a> </div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a> </div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's CSS:
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .nav .active > a, .navbar-default .nav .active > a:hover, .navbar-default .nav .active > a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255,255,255,0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
If you don't mind using JQuery, add this to your <script> tag,
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
Add this to your CSS (anywhere)
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
And add a JQuery link in the <head> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent ;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .nav .active>a,
.navbar-default .nav .active>a:hover,
.navbar-default .nav .active>a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" 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="#bs-example-navbar-collapse-1"> <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="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br> but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about">
<a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown
Act, and government and municipal litigation.<br>
<br> Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br> Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles
Editor of the Hastings International and Comparative Law Review.<br>
<br> Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County
Bar Association.<br>
<br> Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles
Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service">
<a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br> High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br> Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations,
high net worth individuals, government and quasi government bodies).<br>
<br> A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the
knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br> The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work,
impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a>
</div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Checks the dependencies on codepen, maybe you need some JS files
Nevermind. I found the solution. It wasn't the order of the styling files but the order of the js and jquery files. It works fine now. Thanks anyway!

Changing bootstrap grid margins

I'm a begginer coder and i'm learning to use bootstrap grid. Although, i didn't quite understand how the container margins work.
I wrote this piece of coding for a website footer and tried using bootstrap grid, but i wanted the social icons to be about 20px to the right and i can't get it. Inspecting the element at google chrome i can see there is a margin right but i can't seem to customize it and make it smaller.
take a look - this is my footer's html code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
Now, this is my CSS code:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
a i.fa:hover {
color: #57cdf7; !important;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!
I'm assuming that your question means you want the social icons to sit on the FAR right of the screen, not necessarily in the confines of the grid that Bootstrap sets.
You would be messing with the Bootstrap grid to re-define .container like you did, and there are issues that go along with that (as you saw).
The best bet is to create an entirely separate component that you can move to wherever you want, independent of the Bootstrap grid.
HTML
<div class="social-icons">
<ul>
<li>Social Icon</li>
<li>Another Icon</li>
</ul>
</div>
CSS
.social-icons {
position: fixed;
bottom: -10px;
right: -5px;
}
ul {
list-style: none;
}
.social-icons li {
display: inline;
padding-right: 30px;
padding-bottom: 20px;
width: 100px;
}
CodePen
This in particular glues the social icons to the bottom of the page regardless of scrolling. But it gives you an idea of what to do.
First, you are supposed to wrap the whole content inside the container. Container is pre set class in bootstrap to keep your content in the appropriate place with appropriate width on different size screens.
<div class="container">
<footer>
<div class="row">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-6">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
</div> <!--end container-->
Also, the cols should equal to 12. col-md-2 + col-md-4 + col-md-6 = col-md-12.
col-md-12 is the full width of the page.
Here is a good read for you: http://getbootstrap.com/css/
And, what you are seeing in the inspector "margin right by social icons" is padding or the width that is pre set on your container in the bootstrap css.
First, Use row and container Class Separately.
Second, Your cols should equal to 12 as described in bootstrap grid system.
Third, you can also use offsetting columns which increases the left margin. example is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script>
</head>
<footer>
<div class="container ">
<div class="row ">
<div class="col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class=" col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class=" col-md-3 col-md-offset-3">
<i class="fa fa-home fa-2x" aria-hidden="true" ></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</footer>