I am attempting to have a page with 7 icons on it. Below each icon I would like a short link and a small sentence. Additionally, I am attempting to get 4 icons horizontally on one row and 3 horizontally on the second row. I've managed to get the text and link the way I want it, but I can't seem to align them in one row horizontally. Here is my code:
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row" style="text-align:center;">
<div class="col-sm-12">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
By removing the "col-sm-12" and the "position relative" elements, I was able to achieve the desired content on each row. Additionally, I added a "display: flex" and "flex-wrap" element to the "row" parent div. Additionally, I added the meta "viewport" link in the head of the HTML to retain responsiveness.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>
<body>
<div class="row" style="text-align:center; align-items: center; display:flex; flex-wrap: wrap; width: 100%; justify-content: center;">
<div class="placeholder1" style="inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
</body>
</html>
With your current structure, you can add d-flex and justify-content-around as classes on your col-sm-12 div. Then set w-100 on your row so they span the full width.
See below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row w-100" style="text-align:center;">
<div class="col-sm-12 d-flex justify-content-around align-items-center flex-wrap">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row w-100">
<div class="col-sm-12 d-flex justify-content-around align-items-center">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="null" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
The layout you desire is easily obtained by using the BS grid. If you want 4 items to be on one row together, put them each inside a .col-3 then put all of those inside a .row
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="col-3">
<div class="placeholder1">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i><br>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder2">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i><br>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i><br>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i><br>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-3">
<i class="fa-solid fa-database fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-chalkboard fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-person-chalkboard fa-4x"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
Related
I try to clone a website's front end to improve my knowledge.
The problem is Header is not at the top of this website.
Im new to bootstrap but i have to control it.
I did reset the CSS.
It's my first time here, I'm appreciated your help.
body {
margin: 0;
padding: 0;
}
*{
padding: 0;
margin: 0;
}
.img {
width: 221px;
height: 56px;
}
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<header class="sticky-top">
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
I have moved some code around and managed to get it looking somewhere close, make sure you are pulling in the correct imports in you tag, like
Bootstrap 5 or 4 etc...
(SECOND ATTEMPT)
header {
border-bottom: 3px solid blue;
background-color: #eaeaea;
}
.dropdown-item {
background-color: red!important;
}
.sidebar {
overflow: hidden;
background-color: #eaeaea;
position: sticky;
top: 0;
width: 200px;
border-right: 2px solid blue;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
</div>
<header class="flex flex-col sticky-top">
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<div class="sidebar">
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
</div>
<!--sidebar end-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I would consider your options as there are a few ways of doing this, this way is preferred by me but not everyone.
Firstly we fixed the element so its stays where it is, next we apply top:0 to make sure the element is at the top of the page and finally passing 'width: 100%' to ensure the navigation fills the width entirely.
I can help more if this answer is not enough.
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
width: 100%;
}
I have 3 evenly sized columns within a bootstrap container class which I would like to display on the same row. (Until they all collapse simultaneously on a smaller screen) Currently, the first two columns align horizontally, but the third is positioned directly below the first. I have spent some time adjusting my CSS and html, but to no avail.
I've browsed for a relevant answer to my question, as I was sure this is quite a simple problem to fix, however I have not been able to find anything. Any solutions would be greatly appreciated.
(Bootstrap v4.4.1)
.cmsInterface {
background: yellow;
margin: 1em;
padding: 1em;
padding-top: 5em;
padding-bottom: 5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 cmsInterface" id="cms1" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></h5>
</div>
<div class="col-lg-4 cmsInterface" id="cms2" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></h5>
</div>
<div class="col-lg-4 cmsInterface" id="cms3" align="center">
<h5><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></h5>
</div>
</div>
</div>
A screenshot of how the code currently looks in a browser:
columns in boostrap are supposed to stick to each others , to allow margin, you may only use .col without a number, and eventually add the -lg breakpoint:
example turning : <div class="col-lg-4 cmsInterface" id="cms2" align="center"> into <div class="col-lg cmsInterface" id="cms2" align="center">
.cmsInterface {
background: yellow;
margin: 1em;
padding: 1em;
padding-top: 5em;
padding-bottom: 5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg cmsInterface" id="cms1" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></h5>
</div>
<div class="col-lg cmsInterface" id="cms2" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></h5>
</div>
<div class="col-lg cmsInterface" id="cms3" align="center">
<h5><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></h5>
</div>
</div>
</div>
Demo : https://codepen.io/gc-nomade/pen/OJPrOqW
I am trying to make a break between divs for responsive viewport. here is my code and what it looks like now. I am new to css and html. I need 4 divs to be in one row and the rest of 4 divs in the second row but they should stack up to 2 divs per row in small and extra small viewports.
<div class="row">
<div class="benefitItem">
<i class="fa fa-check-circle-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">24 Hr Access</p>
</div>
<div class="benefitItem">
<i class="fa fa-coffee fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Unlimited Coffee</p>
</div>
<div class="benefitItem">
<i class="fa fa-envelope-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Mail Service</p>
</div>
<div class="benefitItem">
<i class="fa fa-archive fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Vintage Design</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-wifi fa-lg"></i><br/>
<p style="overflow-wrap: break-word;"> Insanely Fast Internet</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-video-camera fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">HD Projectors</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-building-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Conference Rooms</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-users fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Group Events</p><br/>
</div>
</div>
this is css:
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.benefitItem{
width: 100px;
margin: 0 auto;
}
This is how it looks now
I want it to look like this 4 divs in one row
the rest 4 dives in the second row
I assume there is a
<div class="row">
at the very top of the code that you posted, just left off of the copy and paste.
1) The easiest To make the row of 8 items stack into 2 rows of 4 items each (in the medium, large, and extra large viewports) would be to add another after the 4th item. This looks like:
<div class="row">
<div class="benefitItem">
<i class="fa fa-check-circle-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">24 Hr Access</p>
</div>
<div class="benefitItem">
<i class="fa fa-coffee fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Unlimited Coffee</p>
</div>
<div class="benefitItem">
<i class="fa fa-envelope-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Mail Service</p>
</div>
<div class="benefitItem">
<i class="fa fa-archive fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Vintage Design</p><br/>
</div>
</div>
<div class="row">
<div class="benefitItem">
<i class="fa fa-wifi fa-lg"></i><br/>
<p style="overflow-wrap: break-word;"> Insanely Fast Internet</p><br/>
</div> ... (continued)
2) To make the two rows break into 4 rows of 2 items in the small and extra small viewports, you need to add a flex-wrap: wrap; line to your .row css class AND create a media query for the smaller viewports with:
#media (max-width: 640px) {
.benefitItem {
flex-basis: 50%;
}
}
You can change the 640px value to be the breakpoint at which you want the 2-item stacking to start.
I'm not sure this is the MOST efficient way to solve your problem, but it worked for me!
How do i remove border right form the last div?
.process {
border-right: 1px solid #e0e0e0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
<div class="row">
<div class="col-md-4">
<div class="process">
<header>STEP 1</header>
<div class="process-content">
<i class="fa fa-user-plus icon" aria-hidden="true"></i>
<h1>Signup</h1>
<p>Sign Up as a Company or an Individual</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 2</header>
<div class="process-content">
<i class="fa fa-upload icon" aria-hidden="true"></i>
<h1>Upload Resume</h1>
<p>Upload your resume and provide us with details of you experience and skills</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 3</header>
<div class="process-content">
<i class="fa fa-smile-o icon" aria-hidden="true"></i>
<h1>Get Hired</h1>
<p>Browse the available job postings and get hired according to your skills</p>
</div>
</div>
</div>
</div>
</div>
I'm having trouble removing the right border form the last div I tried using the :last-child:border:remove;
Get the last child using CSS :last-child pseudo-class selector. Apply the selector to the parent and get nested child since the parents are siblings.
.process {
border-right: 1px solid #e0e0e0;
}
.col-md-4:last-child .process {
border-right: none;
}
<div class="job-posting">
<div class="row">
<div class="col-md-4">
<div class="process">
<header>STEP 1</header>
<div class="process-content">
<i class="fa fa-user-plus icon" aria-hidden="true"></i>
<h1>Signup</h1>
<p>Sign Up as a Company or an Individual</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 2</header>
<div class="process-content">
<i class="fa fa-upload icon" aria-hidden="true"></i>
<h1>Upload Resume</h1>
<p>Upload your resume and provide us with details of you experience and skills</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 3</header>
<div class="process-content">
<i class="fa fa-smile-o icon" aria-hidden="true"></i>
<h1>Get Hired</h1>
<p>Browse the available job postings and get hired according to your skills</p>
</div>
</div>
</div>
</div>
</div>
Start by selecting the containing parent element for specificity (.job-posting), then apply the pseudo-selector :last-child to the containing element of the .process class you intend to target:
.job-posting .col-md-4:last-child .process {
border-right: 0px;
}
Since you are using framework classes that are most likely going to be used elsewhere you should use some sort of unique selector, like .job-posting, to avoid any conflicting styles you may experience on other pages or elements utilizing the same classes or similar nesting or DOM structures.
Just add this css:
.job-posting .col-md-4:last-child .process {
border-right: 0;
}
.process {
border-right: 1px solid #e0e0e0;
}
.job-posting .col-md-4:last-child .process {
border-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
<div class="row">
<div class="col-md-4">
<div class="process">
<header>STEP 1</header>
<div class="process-content">
<i class="fa fa-user-plus icon" aria-hidden="true"></i>
<h1>Signup</h1>
<p>Sign Up as a Company or an Individual</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 2</header>
<div class="process-content">
<i class="fa fa-upload icon" aria-hidden="true"></i>
<h1>Upload Resume</h1>
<p>Upload your resume and provide us with details of you experience and skills</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 3</header>
<div class="process-content">
<i class="fa fa-smile-o icon" aria-hidden="true"></i>
<h1>Get Hired</h1>
<p>Browse the available job postings and get hired according to your skills</p>
</div>
</div>
</div>
</div>
</div>
.process:not(:last-child){
border-right: 1px solid #e0e0e0;
}
Apply style to all elements except last child.
You should think over the condition of multi line adaptation.Use class .row to show a row , and not just limit to class .col-md-4.
Note: Not use last-* on class .process .
.process {
border-right: 1px solid #e0e0e0;
}
.row div:last-child .process{
border-right: none;
}
<html>
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.process {
border-right: 1px solid #e0e0e0;
}
.row div:last-child .process{
border-right: none;
}
</style>
</head>
<body>
<div class="job-posting">
<div class="row">
<div class="col-md-4">
<div class="process">
<header>STEP 1</header>
<div class="process-content">
<i class="fa fa-user-plus icon" aria-hidden="true"></i>
<h1>Signup</h1>
<p>Sign Up as a Company or an Individual</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 2</header>
<div class="process-content">
<i class="fa fa-upload icon" aria-hidden="true"></i>
<h1>Upload Resume</h1>
<p>Upload your resume and provide us with details of you experience and skills</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="process">
<header>STEP 3</header>
<div class="process-content">
<i class="fa fa-smile-o icon" aria-hidden="true"></i>
<h1>Get Hired</h1>
<p>Browse the available job postings and get hired according to your skills</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="process">
<header>STEP 1</header>
<div class="process-content">
<i class="fa fa-user-plus icon" aria-hidden="true"></i>
<h1>Signup</h1>
<p>Sign Up as a Company or an Individual</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="process">
<header>STEP 2</header>
<div class="process-content">
<i class="fa fa-upload icon" aria-hidden="true"></i>
<h1>Upload Resume</h1>
<p>Upload your resume and provide us with details of you experience and skills</p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="process">
<header>STEP 3</header>
<div class="process-content">
<i class="fa fa-smile-o icon" aria-hidden="true"></i>
<h1>Get Hired</h1>
<p>Browse the available job postings and get hired according to your skills</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS class name is process and all the div's that you have used has the same class name as in CSS...
Which means all the DIV with same class name will have the same property, in this case, a right border line..
So one thing you can do is change the class name...
How can i float left the social icons with bootstrap, with text centered?
Im showing an image here, what i want. Now i use col-md-3 divs for floating, but there are to many free spaces between the divs.
<div class="col-md-12 footer_social_divs_box">
<div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
I guess you don't need to use the responsive classes on this:
.footer-responsive {
margin: 0 5px;
display: inline-block;
}
.text-center {
text-align: center;
}
.fa {
display: inline-block;
width: 32px;
height: 32px;
background: #000;
}
<div class="col-md-12 footer_social_divs_box text-center">
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
You don't need responsive class for that, you can simple use a padding or margin.
try this:
https://jsfiddle.net/leonardoaraujocosta/f070qpfh/
<div class="col-md-12 footer_social_divs_box">
<div class="social_links_container">
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
.social_links_container {
width: 300px;
margin: 0 auto;
}
.social_link_item {
width: 33%;
float: left;
color: white;
text-align: center;
}
I hope I helped you