Joshua Palfreman February 2016

Equal Width col-md-4's

I am very new to programming.

I am trying to get three col-md-4s to have equal width. I assumed that CSS would not be required for this if Bootstrap was referenced correctly in HTML. Any advice would be much appreciated.

Code:

/*NAV LOGO*/

.logo { 
text-decoration: none;
color: black; 
}

.logo img { 
margin-left: auto; 
margin-right: auto;
display: block;
}

/*NAV MENU*/

.menu { 
text-align: center;
}

.menu ul li { 
display: inline-block;
list-style-type: none;
margin-left: 20px; 
margin-right: 20px;
}

.menu ul li a:link { 
	text-decoration: none; 
	background: white;
	color: black;
	border: 1px solid black;
	padding-left: 18px; 
	padding-right: 18px; 
	padding-top: 10px; 
	padding-bottom: 10px
	margin-top: 10px;
	text-align: center;
}

.menu ul li a:hover { 
background: blue;
color: white;
}

/*SUPPORTING*/



/*FOOTER*/
.footer ul li { 
	color: white;
	list-style-type: none; 
	margin-left: 20px; 
	margin-right: 20px; 
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 0px; 
} 

.footer .container { 
text-align: center;
background: black; 
height: 100px;
}

.footer ul li a:link { 
	color: white;
	text-decoration: none;
}

.footer p { 
color: white;
margin-top: 0px;
}
<!DOCTYPE html> 
<html> 

<head>
	<link rel="stylesheet" type="text/css" href="css.css">
	<title>WASTEdar | Waste Management and Recycling in Dar es Salaam, Tanzania</title>
</head> 

<body>

	<!--NAV--> 

<div class="nav">
	<div class="container">
		<div class="logo"> 
			<img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050        

Answers


dippas February 2016

You need to add the bootstrap.css as well the bootstrap.js, I added the col-xs-4 so you can see those columns having same width in small screens such this snippet.

Snippet

/*NAV LOGO*/

.logo {
  text-decoration: none;
  color: black;
}
.logo img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/*NAV MENU*/

.menu {
  text-align: center;
}
.menu ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 20px;
  margin-right: 20px;
}
.menu ul li a:link {
  text-decoration: none;
  background: white;
  color: black;
  border: 1px solid black;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 10px;
  padding-bottom: 10px margin-top: 10px;
  text-align: center;
}
.menu ul li a:hover {
  background: blue;
  color: white;
}
/*SUPPORTING*/

/*FOOTER*/

.footer ul li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 0px;
}
.footer .container {
  text-align: center;
  background: black;
  height: 100px;
}
.footer ul li a:link {
  color: white;
  text-decoration: none;
}
.footer p {
  color: white;
  margin-top: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!--NAV-->
<div class="nav">
  <div class="container">
    <div class="logo">
      <img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050b6c2864e96/54db5b74e4b00d17d9bb0442/1423661993508/wasteda 

Post Status

Asked in February 2016
Viewed 1,722 times
Voted 10
Answered 1 times

Search




Leave an answer