This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.
.left{
position:absolute;
padding-left:200px;
}
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
You can do it like this. This is one way.
Related
I'm not a good developer since I'm only a student. I'm trying to make a website for me but I can't align-items on my rows in bootstrap. I'm trying to do this:
1 but I'm stuck on this:
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
Can someone help me?
The items just don't align like i want them to
For this to work you need to put every element in single row. You have 3 rows.
Imagine row like this
Every line represent single row. If you put content in one row element it will be displayed in single line. If you put in more rows content will be displayed in more rows.
So your code should look like this
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
If this doesn't help then I didn't understood you correctly so come back here so we can fix it :)
UPDATE
Based on new info I got this should be new solution
<div class="container-fluid top">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
</div>
<div class="container-fluid center">
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid bottom">
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
.top {
position: aboslute;
top: 0;
}
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bottom {
position: absolute;
bottom: 0;
}
align-items property depends on the height row. For this you can set height for row
i pretend to make this first column fixed, but when i add position:fixed, the columns overlap each other, how to fix this?
If its not possible, i want to know a sample that gives me a
side navbar fixed and responsive with bulma
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
```
As I understood, your sidebar disappears on mobile, right?
Have you tried removing is-hidden-mobile class from aside element?
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I have 4 Div with class col-md-3 in one row
but the text does appear really ugly. i have made an little overview here:
Prod. Comp. (middle) lang. div4
text texttext text text
textta text txt txt
this means, the text is not under the /Product, company, languange, and the 4th Division
i want to have it look like this
div1 div2 (middle) div3 div4
text texttext text text
textta text txt txt
here is my code
HTML:
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
here is my css code:
#footerRow{
text-align: center;
}
the solution should be responsive bootstrap if possible!
Remove padding and margin for zero. Remove text-align:center for #footerRow
#footerRow ul {margin:0px;padding:0px}
#footerRow ul li{
text-align: left;
list-style:none
}
#footerRow h2{min-height:30px}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Just change center to left
text-align: left
Here are a few examples.
see if this is what you'r looking for https://jsfiddle.net/DTcHh/26745/
just remove
#footerRow{
text-align: center;
}
try to this...
ol, ul {list-style: none;}
#footerRow ul {margin:0px;padding:0px}
<!DOCTYPE html>
<html>
<head>
<title>Stack Overflow</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2> Div4</h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here JSFiddle Here enter link description here
ul{
list-style-type: none;
padding: 0px;
}
#footerRow{
display: inline-flex;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="footerRow">
<div class="col-xs-12 col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-xs-12 col-md-3">
<h2>Social </h2>
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Hi I am trying to display 5 responsive rows in one line in footer but it seems like its not working exactly the way I want it.
Here is my code
<footer>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | (02) 9773 8773
<br>
F | (02) 977 8125
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 col-md-offset-1 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-2 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-2 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</div>
</footer>
I even tried to replace col-md-2 with col-md-3 but the last columns moves to next line. Here is attached image I am trying to make exact like this Image
Follow this example
CSS:
#media(min-width:768px){
div.col-sm-7.seven-three{width:60%!important;}
div.col-sm-5.five-two{width:40%!important;}
}
HTML:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 seven-three">
<div class="row">
<div class="col-sm-4" style="background-color:#000;">Column 1</div>
<div class="col-sm-4" style="background-color:#333;">Column 2</div>
<div class="col-sm-4" style="background-color:#444;">Column 3</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6" style="background-color:#555;">Column 4</div>
<div class="col-sm-6" style="background-color:#666;">Column 5</div>
</div>
</div>
</div>
</div>
Here's JSFiddle
Try this
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | (02) 9773 8773
<br>
F | (02) 977 8125
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-3 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-3 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</footer>
you shouldn't use nesting col under a row, and keep all children of row plus to 12
<footer class="container">
<div class="col-md-12 row">
<div class="col-md-3">
<div class="comp-name">
<h2>Company Name</h2><br>
<p>Halimun Street 25
Jakarta, Indonesia
12850</p><br>
YourDomin.com
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="col-md-4 menu-list">
<ul>
<li>Sitemap</li>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Menu</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-4 lorem">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="assets/images/footer_logo.png" alt=""><br>
<p class="text-muted">Copyright © <?php print date("Y"); ?> Freepik
Company S.L. All rights reserved.</p><br>
<p>
<i class="fa-brands fa-facebook-square"></i>
<i class="fa-brands fa-instagram-square"></i>
<i class="fa-brands fa-twitter-square"></i>
</p>
</div>
</div>
</footer>
I'm trying to break two ul lists of jobs under the two headers, "Job Categories" and "Job Function,"into multiple columns, columns not necessarily the same height, and responsive. Otherwise, the single column lists are too long. These two headers and lists should be inline (horizontal). This obviously needs to be responsive for mobile as well.
What's the best way to do this? Visual example below:
Using the grid system, one could "break-up the cells" of the bootstrap grid system:
<div class="container">
<!-- Content Area-->
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="row">
<h2 class="">Job Functions</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-5">
<div class="row">
<h2 class="">Job Categories</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
It worked. Enjoy!
<div class="col-md-6">
Bootstrap breaks a page/div down into 12 "columns" inside the class .container. This way you're giving half of that space to one of your headers and it'll be mobile-friendly.
I hope this isn't a gross oversimplification but given the information available it seems right.
Try this
<ul class="col-md-6 col-sm-6 col-xs-12">
<li class="col-xs-12"><h2>Job Function</h2></li>
<li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
<li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>
<ul class="col-md-6 col-sm-6 col-xs-12">
<li class="col-xs-12"><h2>Job Categories</h2></li>
<li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
<li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>