Question 169387 in Twitter Bootstrap Question posted in

How can I add a CSS style tag to a Django template? #TwitterBootstrap

I’m trying to style my HTML code but it’s not working properly I tried to add the style tag inside the load static tag and also I tried to add block mycss tag

{% extends 'base.html' %}


{% load static %}



<style>

    .divider:after,
    .divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}
</style>



{% block content%}


<section class="vh-100">
    <div class="container py-5 h-100">
      <div class="row d-flex align-items-center justify-content-center h-100">
        <div class="col-md-8 col-lg-7 col-xl-6">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
            class="img-fluid" alt="Phone image">
        </div>
        <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
          <form>
            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form1Example13" class="form-control form-control-lg" />
              <label class="form-label" for="form1Example13">Email address</label>
            </div>
 <!-- Submit button -->
            <button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button>
  
            <div class="divider d-flex align-items-center my-4">
              <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
            </div>
  
            <a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
              role="button">
              <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
            </a>
            <a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
              role="button">
              <i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
  
         </form>

I’m trying to style my HTML code but its not working properly I didn’t add my full HTML code anyone please help me to solve this

Tags:

2

Answers


  1. 0

    but as i see you not use your divider class in you code
    if you want to style div elements you should use this

    <style>
div{
bla bla
}
</style>
    Login or Signup to reply.
  2. 0

    Template inheritance works the same way class inheritance works in OOP. So if you want to inherit base.html and want to update some parts, then you block that part that you want to update, and then in another template you can use the same block to add new content. For example, if you want to update CSS in layout.html, which is extending from base.html

    base.html

    <html>
<head>
{% block css %}
<style>
 /* add your css */
</style>
{% endblock %}
</head>
<body>
{% block content %}
<h1>Base</h1>
{% endblock %}
</body>
</html>

    layout.html

    {% extends 'base.html' %}
{% load static %}

{% block css %}
<style>
 /* add your css */
</style>
{% endblock %}

{% block content %}
<h1>Layout</h1>
{% endblock %}

    So when you visit base.html you’ll see "Base" and if you visit layout.html you’ll see "Layout" with their own stylesheet applied.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search