Issue
I have a Bootstrap template. I want to make the template elements rtl so I have set the site title to rtl in the navbar, but the button also in the navbar gets rtl.
My code shows the site title on the left and the buttons on the right But I don't want this. I want the buttons to be on the left side and the title of the site on the right. Actually I want the buttons to be ltr. For example see the below schema:
<signup button> <login button> <title>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Edenthought </title>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/morph/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
<a class="navbar-brand main-heading">
Edenthought
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="btn btn-primary navbar-btn" type="button" href="{% url 'register' %}">Register</a>
</li>
<li class="nav-item">
<a class="btn btn-primary navbar-btn" type="button" href="{% url 'my-login' %}">Login</a>
</li>
</ul>
</div>
</nav>
<body>
<br>
<br>
<div class="text-center">
<h2> Edenthought.... A home for your thoughts. </h2>
<br>
<a class="btn btn-outline-primary" type="button" href="{% url 'register' %}">Register</a>
</div>
</body>
<script src=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous">
</script>
<script src="{% static 'js/app.js' %}"></script>
</html>
Solution
Don't use br tags. use the margin class of Bootstrap instead. In this modified version, I moved the buttons () to the left side (me-auto class) and the site title () to the right side. And for the mobile view, I changed the order.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Edenthought </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/morph/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
<div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="btn btn-primary navbar-btn" type="button" href="{% url 'register' %}">Register</a>
</li>
<li class="nav-item">
<a class="btn btn-primary navbar-btn" type="button" href="{% url 'my-login' %}">Login</a>
</li>
</ul>
</div>
<a class="navbar-brand main-heading ms-auto order-1 order-lg-0">Edenthought</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="text-center mt-4">
<h2> Edenthought.... A home for your thoughts. </h2>
<a class="btn btn-outline-primary" type="button" href="{% url 'register' %}">Register</a>
</div>
<script src=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>
Answered By - arifulsajib
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.