CODEWITHSUNDEEP
htmltwitter-bootstrap
Bubbycolditz
Bubbycolditz

Reputation: 33

Bootstrap 4 Cards and Navs

I am trying to put my card next to my navigation that is vertical, but it decides that it needs to go under. So how can I fix this solution? I've been spending hours on trying to fix this problem

Work:

<?php include 'includes/db.php'?>
<html>
	<head>
		<title>Admin Panel</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
		<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
		
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" 	crossorigin="anonymous"></script>
	</head>
	<body>
		<?php include 'includes/header.php';?>
		
		<div class="col-lg-2">
			<ul class="nav flex-column">
				<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
				<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
					<ul class="collapse" id="new-items">
						<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
						<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
					</ul>
				</li>
				<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
				<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
				<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
				<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
			</ul>
		</div>
		<br/>
		<div class="col-lg-8">
		<div style="width:50px;height:50px;"></div>
			<div class="col-md-4">
				<div class="card">
					<div class="card-header">
						<div class="card-block">
							<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
							<div class="col-xs-9 float-right">
								<div style="font-size:2.5em">20</div>
								<div style="">Posts</div>
							</div>
						</div>
					</div>
					<a href="#">
						<div class="card-footer">
							<div class="float-left">View Posts</div>
							<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
				<div class="card">
					<div class="card-header">
						<div class="card-block">
							<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
							<div class="col-xs-9 float-right">
								<div style="font-size:2.5em">20</div>
								<div style="">Posts</div>
							</div>
						</div>
					</div>
					<a href="#">
						<div class="card-footer">
							<div class="float-left">View Posts</div>
							<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
			</div>
		</div>
			
		<footer></footer>
	</body>
</html>

If anyone can figure this out, it will be greatly appreciated Please also note that this is an administrator panel for a blog I am making (Custom CMS) so if you have any ideas on that as well, I will greatly appreciate it.

Upvotes: 0

Views: 285

Answers (1)

Pandurengan G
Pandurengan G

Reputation: 34

You could acheive this by Using css floating styles. I add a custom classes for both navigation and cards div and apply float:left property for both divs. Break(br) tag is removed. Immediate first child of card is empty, hence I made it to invisible.

Another method you can use float-left css classes for acheiving float:left css properties in both divs.

Please find the code below.

<html>
<head>
    <title>Admin Panel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <style>
.Cls_navigation,.Cls_card{float:left}

.Cls_card > div:first-child{display:none;}

</style>

</head>
<body>
    <?php include 'includes/header.php';?>

    <div class="col-lg-2 Cls_navigation">
        <ul class="nav flex-column">
            <li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
            <li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
                <ul class="collapse" id="new-items">
                    <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
                    <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
                </ul>
            </li>
            <li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
            <li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
            <li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
            <li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
        </ul>
    </div>

    <div class="col-lg-8 Cls_card">
    <div style="width:50px;height:50px;"></div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-block">
                        <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
                        <div class="col-xs-9 float-right">
                            <div style="font-size:2.5em">20</div>
                            <div style="">Posts</div>
                        </div>
                    </div>
                </div>
                <a href="#">
                    <div class="card-footer">
                        <div class="float-left">View Posts</div>
                        <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
            <div class="card">
                <div class="card-header">
                    <div class="card-block">
                        <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
                        <div class="col-xs-9 float-right">
                            <div style="font-size:2.5em">20</div>
                            <div style="">Posts</div>
                        </div>
                    </div>
                </div>
                <a href="#">
                    <div class="card-footer">
                        <div class="float-left">View Posts</div>
                        <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <footer></footer>
</body>

Upvotes: 1

Related Questions