Forum Pasja Informatyki - Najnowsze z tagiem bootstrap

Dropdown w formularzu React (Tailwind) – niestabilne działanie na urządzeniach mobilnych

Wed, 18 Mar 2026 13:53:14 +0000

mam problem z dropdownem w formularzu kontaktowym na mobile. Na desktopie wszystko działa poprawnie, natomiast na telefonie po kliknięciu dropdown się nie rozwija albo zachowuje się niestabilnie (czasami trzeba kliknąć kilka razy, czasami w ogóle nie reaguje).

Problem występuje tutaj:
https://digitalstorm.pl

Chodzi konkretnie o formularz kontaktowy (wybór usługi). Wygląda to tak, jakby event kliknięcia nie zawsze się odpalał albo coś blokowało interakcję (może overlay / z-index / focus?).

Stack:

React (Vite)
Tailwind CSS
custom dropdown (nie native select)

Co już sprawdziłem:

brak błędów w konsoli
event onClick jest przypisany poprawnie
na desktopie działa bez problemu
na mobile problem występuje głównie w Chrome

Zastanawiam się czy to może być:

problem z eventami dotykowymi (touch vs click)
konflikt z jakimś elementem nakładającym się na dropdown
albo coś z focus/blur

Miał ktoś podobny problem albo ma pomysł gdzie jeszcze szukać?

Z góry dzięki za pomoc

ZROBIENIE STRONY na Bootstrap 5

Thu, 13 Feb 2025 12:26:28 +0000

Witam,

Szukam osoby, która zrobi stronę na bootstrapie z panelem administracyjnym. Prosta strona blogowa, bez udziwnień. Zoptymalizowana pod seo. Proszę o oferty na maila z wyceną usługi ( wit_gam@wp.pl ). Lekka strona, mało kodu. Pozdrawiam

Boostrap Cards

Sun, 11 Aug 2024 19:26:29 +0000

Hej! Czy ktoś mógłby mi pomóc z wykorzystaniem komponentów kart do stworzenia układu, jak na załączonym obrazku? Nie zależy mi na stylizowaniu przycisków itp., potrzebuję jedynie wsparcia w zbudowaniu „siatki”, która umożliwi uzyskanie takiego efektu.

Framework - bootstrap korepetycje

Fri, 17 May 2024 20:58:58 +0000

Dzień dobry, poszukuje doświadczonej osoby w bootstrapie która oczywiście za opłatą zechce przekazać mi wiedze w lekcjach 1 na 1

Prośba o ocenę/przetestowanie aplikacji

Mon, 04 Mar 2024 20:29:42 +0000

Hej, chciałbym Was prosić o ocenę stronki: https://leagueship.com/

To też jest dobra okazja żeby podziękować panu Mirosławowi Zelentowi, bo jakieś 3 lata temu zaczynałem naukę php i javascriptu właśnie na jego filmikach z youtube.

Przedstawiany projekt oparty został o frameworki: Laravel (Breeze & Inertia) + React + Bootstrap.

Aplikacja pozwala tworzyć własne pokoje do rozgrywania minilig typerów oraz uczestniczyć w ligach globalnych - wystarczy założyć konto i oddawać typy. :) Co jakiś czas pobierane są aktualizacje wyników spotkań oraz ligowych tabel z darmowego API, a kiedy mecz dobiega końca skrypt podlicza typy i przydziela punkty. Niestety w darmowej wersji API nie ma Ekstraklasy, ale może kiedyś pójdę w premium.

Do tworzonych lig można przydzielać graczy i administratorów, jest chat i jakieś pola, które można sobie wypełniać, a później edytować. Można sprawdzać ranking lig i to jak typowano poszczególne mecze. Jest też wykres chart.js i strona profili graczy. Dorobiłem też angielską wersję językową (jeszcze kilka podstron pozostało nieprzetłumaczonych). Większość funkcji działa dopiero po założeniu konta, więc gdyby ktoś chciał potestować to byłoby mi miło.

Przed Euro 2024 spróbuję pójść w jakąś małą reklamę i może coś z tego będzie :) Pozdrawiam

Jak napisać klasę, Bootstrap

Fri, 05 Jan 2024 23:16:08 +0000

Mam taką klasę:

class="btn btn-danger"

Czy da się podpiąć pod to trochę swojego stylu, bezpośredni w <style></style>, jak to zapisać?

Szukam specjalisty od bezpieczeństwa w internecie.

Wed, 06 Dec 2023 00:59:20 +0000

Bezpieczeństwo w internecie

Ochrona ip

Namierzanie przez policję po ip

Framework - Bootstrap

Sat, 11 Nov 2023 11:32:41 +0000

Często mam tak że to co jest w <nav... we frameworku nadpisuje mi wszystkie style zewnętrzne, natomiast jeśli, styl umieszczę wewnątrz "head", to zadziała, chodzi o to, że zewnętrzny styl stosuje się, żeby uporządkować kod, i się robi chaos mały, ale czy klasę w "nav" mogę napisać zewnętrznie czy to jakiś brak implementacji. Jak coś wytłumaczę bardziej kod?

sytuacja jest taka:

<head>

<title></title>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

//moj zewnętrzny nie zadziala, sprawdzam i jakoś błędu nie umię się doszukać, chyba że implementacja

<link rel="stylesheet" href="css/licyt.css">

<style type="text/css">

.mojstyle{}

</style>

</head>

<body>

//wszystko co w "nav" dziedziczy styl

<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding"...

//i tu nie zadziała jeśli Css będzie zewnętrznie, zadziała jeśli zamieszczę w head, idzie to poprawić?

<inut class="mojstyle"...

bootstrap style css

Sat, 21 Oct 2023 14:26:24 +0000

https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css

Styl bootstrap ingeruje mi między innymi w pole fieldset, trochę odłączyłem, ale nie całość, ktoś ma pomysł jaki styl jeszcze działa?

<form><fieldset><legend>Twoja cena:</legend>
<input></fieldset></form>

było:

jest:

bootstrap - jaki to styl czcionki

Wed, 20 Sep 2023 11:51:10 +0000

Mam taki styl:

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">

chodzi o ten szablon:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_webpage&stacked=h

Idzie się domyśleć jaki jest styl tej czcionki w górnej belce :)?

Może to gdzieś tu jest, ale tego nie widzę:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

Bootstrap niełamiący się tekst przy małej szerokości

Wed, 13 Sep 2023 19:48:11 +0000

Hejka, mam problem i nie umiem dojść na czym on się opiera, w sensie piszę sobie Bootstrapa z odc 1 od Zelenta, ale mam przy małej wielkości tekst zachowuje poprzednią szerokość. Daję screeny dla łatwego zobrazowania (na screenie kod + efekt).

Przy dużej szerokości:

Przy małej szerokości (poniżej 769 zaczyna się problem)

Przy szerokości 477 robi się odstęp od krawędzi okna dziwny, właśnie przez tekst, a pamiętam, że tekst powinien się zachowywać responsywnie z defaultu).

Na filmiku jest używana wersja 4 boostrapa, ja używam v5, czy z tego może to wynikać? W divie containerowym użyłem container-fluid myśląc, że to poprawi sytuację, ale nic się nie zmienia.

Aktualny kod:

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	
	<title>Skoki narciarskie</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Blog o skokach narciarskich">
	<meta name="keywords" content="skoki narciarskie, skoczkowie, wyniki">
	<meta name="author" content="Jan Kowalski">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
	<link rel="stylesheet" href="main.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
	
	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
	
</head>

<body>
	
	<main>
		
		<section class="jumpers">
		
			<div class="container-fluid">
				
				<header>
					
					<h1>Poznajmy zawodników</h1>
					<p>W tej sekcji specjalnie dla Was prezentujemy sylwetki zawodników, których znamy z rywalizacji w konkursach pucharu świata oraz olimpijskich. Poznaj osiągnięcia, statystyki, a także ciekawostki na temat najbardziej rozpoznawalnych zawodników!</p>
						
				</header>
				<div class="row">
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/malysz.jpg" class="img-fluid" alt="Adam Małysz"></a>
							<figcaption>Adam Małysz</figcaption>
						</figure>
					
					</div>
					
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/stoch.jpg" class="img-fluid" alt="Kamil Stoch"></a>
							<figcaption>Kamil Stoch</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/ahonen.jpg" class="img-fluid" alt="Janne Ahonen"></a>
							<figcaption>Janne Ahonen</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/schmitt.jpg" class="img-fluid" alt="Martin Schmitt"></a>
							<figcaption>Martin Schmitt</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/kubacki.jpg" class="img-fluid" alt="Dawid Kubacki"></a>
							<figcaption>Dawid Kubacki</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/zyla.jpg" class="img-fluid" alt="Piotr Żyła"></a>
							<figcaption>Piotr Żyła</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/kranjec.jpg" class="img-fluid" alt="Robert Kranjec"></a>
							<figcaption>Robert Kranjec</figcaption>
						</figure>
					
					</div>

					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/schlierenzauer.jpg" class="img-fluid" alt="Gregor Schlierenzauer"></a>
							<figcaption>Gregor Schlierenzauer</figcaption>
						</figure>
					
					</div>
					
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/kot.jpg" class="img-fluid" alt="Maciej Kot"></a>
							<figcaption>Maciej Kot</figcaption>
						</figure>
					
					</div>
					
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/kraft.jpg" class="img-fluid" alt="Stefan Kraft"></a>
							<figcaption>Stefan Kraft</figcaption>
						</figure>
					
					</div>					
					
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/ammann.jpg" class="img-fluid" alt="Simon Ammann"></a>
							<figcaption>Simon Ammann</figcaption>
						</figure>
					
					</div>						
					
					<div class="col-sm-6 col-md-4">
					
						<figure>
							<a href="#"><img src="img/kasai.jpg" class="img-fluid" alt="Noriaki Kasai"></a>
							<figcaption>Noriaki Kasai</figcaption>
						</figure>
					
					</div>						
					
				</div>	
			</div>
				
		</section>
		
	</main>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>

CSS:

body
{
	background-color: #2F3336;
	color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}

h1
{
	font-size: 36px;
	font-weight: 400;
	color: #C0D06F;
	margin: 20px;
}

.jumpers
{
	
	text-align: center;
	padding: 0;
}

.jumpers p{
	overflow-wrap: break-word;
	margin-bottom: 300px;
}
.jumpers figcaption {
	margin-top: 99px;
}

bootstrap adsense

Tue, 12 Sep 2023 18:04:31 +0000

Mam w szablonie bootstrap-a taki kod:

      <div class="well">
                <p>
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-1386766234998792">
</amp-auto-ads>
</p>
      </div>
      <div class="well">
                <p>
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-1386766234998792">
</amp-auto-ads>
</p>
      </div>

Czy to powinno działać, czyli wyświetlać z automatu jakąś reklam, można to skonfigurować i jeszcze jedno mam spore trudności z weryfikacją strony, czy bootstrap ma jakiś zły wpływ na weryfikacje Google AdSense?

bootstrap mobile menu

Tue, 12 Sep 2023 11:11:33 +0000

Witam, takie anomalia w skrypcie mobile menu:
https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

Gdy dołączam arkusz stylów bootstrap, który odpowiada za całą stronę:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

Skrypt mobile menu trochę robi się zniekształcony, ramy trochę wychodzą poza brzegi, ale normalnie działa, nie jestem do końca przekonany czy te style są niezbędne, ale jak to ograniczyć?

Mam to normalnie w stronie głównej w stylach, czyli chyba powinien być priorytet?

/* The device with borders */
div.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
div.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
div.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
div.smartphone div.content {
  width: 360px;
  height: 640px;
  background: white;
}

body

<div class="smartphone">
  <div class="content">
    
  </div>
</div>

Bootstrap więcej skryptu

Thu, 24 Aug 2023 23:49:34 +0000

Witam, czy do tego skryptu idzie dołączyć więcej fotek, próbowałem ale trudno rozkminić?

How To Compare Two Images (w3schools.com)

Bootstrap nie działa justify-content

Mon, 17 Jul 2023 15:38:30 +0000

            <div class="container-fluid">
               <div class="row d-flex flex-row align-items-center justify-content-evenly">
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon1.svg" alt="icon">
                    <p class="number pink number__bigger">721</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon2.svg" alt="icon">
                    <p class="number pink number__bigger text-uppercase">16 kg</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon3.svg" alt="icon">
                    <p class="number pink number__bigger">84</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
             </div>

Cześć czy możecie mi wytłumaczyć czemu nie justify-content nie działa zarówno w przypadku "row" jak "col"?

Bootstrap - łączenie kolumny w dwóch rzędach

Tue, 27 Jun 2023 18:35:06 +0000

Cześć,

chciałbym uzyskać taki layout w bootstrapie:

Znalazłem taką metodę:

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 1</div>
                </div>
            </div>
            <!--Nested rows-->
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 2</div>
                </div>
            </div>
        </div>
        <div class="col-9">
            <div class="mainContent">Main Content Area</div>
        </div>
    </div>
</div>

Czy istnieje możliwość zastosowania takiej metody (czy to jest nesting w bootstrapie?) w moim przypadku, czy pozostaje użyć klasy order?

Dzięki za odpowiedź, pozdrawiam.

Angular - Boostrap modal nie pokazuje się

Thu, 08 Jun 2023 11:32:47 +0000

Mam boostrap model jako oddzielny komponent żeby można było z różnych komponentów go włączać. Myślę że problem jest z <app-modal>. Po naciśnięciu guzika model się włącza ale jest sam pasek i nie pokazuje formularza . Brak errorow w konsoli. Kod jest tu :

Kod HTML modalu:

<ng-template #addJokeModal>
    <div class="modal-content my-custom-modal">
        <div class="modal-header">
            <h4 class="modal-title pull-left">Dodawanie żartu</h4>
            <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
                <span aria-hidden="true" class="visually-hidden">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="adding-joke" *ngIf="!isloading">
                <form method="POST" [formGroup]="addJokeForm" (ngSubmit)="addJoke()">
                    <div class="joke-category">
                        <select name="group" class="custom-select" formControlName="category">
                            <option value="" disabled selected hidden>Wybierz kategorię</option>
                            <option *ngFor="let category of categories">{{ category.name }}</option>
                        </select>
                    </div>
                    <div class="joke-content">
                        <input placeholder="Wprowadź treść" type="text" class="form-control" formControlName="content">
                    </div>
                    <div class="cancel-joke">
                        <button class="cancel-button" (click)="cancelJoke()">Anuluj</button>
                    </div>
                    <div class="add-joke">
                        <button class="add-button" id="add_joke_button">
                            Dodaj
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</ng-template>

i typescript:

import { Component, OnInit, TemplateRef, VERSION } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-joke-modal',
  templateUrl: './add-joke-modal.component.html',
  styleUrls: ['./add-joke-modal.component.css']
})
export class AddJokeModalComponent {

  public jokes: any = [];
  isLoading = true
  modalRef?: BsModalRef;
  public categories: any = [];
  public isloading = true;
  addJokeForm!: FormGroup;
  get addJokeF() { return this.addJokeForm.controls; }
  constructor(
    private PagesService: PagesService,
    private modalService: BsModalService,
    private formBuilder: FormBuilder,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.addJokeForm = this.formBuilder.group({
      category: ['', Validators.required],
      content: ['', Validators.required],
    });
    this.isloading = false;
    this.loadCategories();
  }

openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  addJoke() {
    if (this.addJokeForm.invalid) {
      return;
    } else {
      const json_data = {
        category: this.addJokeF['category'].value,
        content: this.addJokeF['content'].value,
      }
      this.PagesService.AddJoke(json_data).subscribe(response => {
        {
          this.router.navigate(['../home']);
        }
      })
    }
  }
  loadCategories() {
    this.PagesService.LoadCategories().subscribe(response => {
      this.categories = response
      console.log(response)
    })
  }
  cancelJoke() {
    this.modalRef?.hide();
}

}

A tu jest drugi komponent w którym ten moduł powinien być wyświetlany:

<button class="add" (click)="openModal(addJokeModal)">Dodaj</button>

<ng-template #addJokeModal>
  <app-add-joke-modal></app-add-joke-modal>
</ng-template>

<div class="jokes">
  <div class="col-lg-6 col-sm-12 joke" *ngFor="let joke of jokes">
    <div class="category">
      {{joke.category}}
    </div>
    <div class="conent">
      {{joke.content}}
    </div>
    <button class="delete" (click)="deleteJoke(joke.id)">Usuń</button>
  </div>
</div>

i typescript:

import { Component } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { AddJokeModalComponent } from '../add-joke-modal/add-joke-modal.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-all-jokes',
  templateUrl: './all-jokes.component.html',
  styleUrls: ['./all-jokes.component.css']
})
export class AllJokesComponent {

  public jokes: any = [];
  modalRef?: BsModalRef;

  constructor(
    private PagesService: PagesService,
    private modalService: BsModalService,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.loadData();
  }

  loadData() {
    this.PagesService.LoadJokes().subscribe(response => {
      console.log(response)
      this.jokes = response;
    });
  }

  deleteJoke(jokeId: number) {
    this.PagesService.DeleteJoke(jokeId).subscribe(response => {
      // Po usunięciu żartu z bazy danych wykonaj odpowiednie działania (np. odświeżenie listy żartów)
      this.loadData();
    });
  }
  openModal(template: any) {
    this.modalRef = this.modalService.show(template);
  }
}

w module.ts mam w deklaracjach ten komponent.

Może ktoś mógłby pomóc.

Ustawienie grafiki "Strona w budowie" w Bootstrap 5 - jak pozbyć się marginesów?

Fri, 26 May 2023 11:46:59 +0000

Cześć, mam problem z usunięciem marginesów w bootstrapie, chcę ustawić dwie grafiki informujące, że strona jest w budowie - jedną dla komputerów jedną dla urządzeń mobilnych.

Próbuję tak:

    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container .row {
            margin: 0;
            padding: 0;
        }

        .full-width-img {
            width: 100%;
        }

        @media (min-width: 992px) {
            .full-width-img {
                width: 100vw;
            }
        }
    </style>
    <title>Strona w Budowie</title>
</head>
<body>
<div class="container-fluid full-width-img-container">
    <div class="row">
        <div class="col">
            <img src="img/mala.jpg.jpg" class="img-fluid d-block d-lg-none full-width-img" alt="mala grafika">
            <img src="img/b1.jpg" class="img-fluid d-none d-lg-block full-width-img" alt="duza grafika">
        </div>
    </div>
</div>

Przy okazji, jakich rozmiarów grafik powinienem użyć dla komputerów, a jakich dla urządzeń mobilnych?

Wyświetlanie Accordion z BT5 na mobilnym chromie

Thu, 20 Apr 2023 08:43:15 +0000

Jestem początkujący, rozpoczynam zabawę z tworzeniem stron. Pewnie sprawa jest prosta - ale nie mogę rozwikłać problemu.

Mam zrobioną stronę z elementami Bootstrapa - accordion colapse. Testuję na komputerze stacjonarnym (Firefox, Chrome) i wszystko działa OK - tzn accordion rozwija się.

Testuję na komórce (Chrome, Opera) i na Operze działa poprawnie a na Chromie nie. Czyżby te elementy Bootstrapa 5 nie były obsługiwane przez mobilnego chroma?

Czy da się coś poprawić by na komórce w Chromie też się wyświetlało poprawnie.

testowa strona zamieszczona na: www.fotek.eu/mieszkanie/

Pagination i align-items-center? Szukam specjalisty od bootstrapa 5 :)

Tue, 11 Apr 2023 17:16:08 +0000

Cześć!

Chciałbym nawigację paginacji wyśrodkować względem tekstu obok i chciałbym zapytać czemu nie działa mi ona?

używam do tego "align-items-center".

Co robię nie tak?

<div class="row justify-content-center">
							<div class="col-md-6 text-center mt-3 text-md-start" style="background:red;"> <span class="">Ilość rekordów <span class="badge text-bg-dark" id="historyTableNavLength"></span></span></div>
							<div class="col-md-6 text-center mt-3 text-md-start" style="background:white;">
								<nav aria-label="Page navigation" id="historyTableNav">
									<ul class="pagination d-flex justify-content-center justify-content-md-end align-items-center">
										<li class="page-item">	<button data-pages-action="prev" class="page-link">Poprzednia</button>	</li>
										<li class="page-item">	<button data-pages-action="prevgo3" data-id="" class="page-link"></button>	</li>
										<li class="page-item disabled">	<button data-pages-action="prevgo2" class="page-link">...</button>	</li>
										<li class="page-item">	<button data-pages-action="prevgo1" data-id="" class="page-link"></button>	</li>
										<li class="page-item">	<button data-pages-action="go" data-id="" class="page-link"></button>	</li>
										<li class="page-item">	<button data-pages-action="nextgo1" class="page-link"></button>				</li>
										<li class="page-item disabled">	<button data-pages-action="nextgo2" class="page-link">...</button>	</li>		
										<li class="page-item">	<button data-pages-action="nextgo3" data-id="" class="page-link"></button>	</li>
										<li class="page-item">	<button data-pages-action="next" class="page-link">Nastepna</button>	</li>
									</ul>
								</nav>
							</div>
						</div>

Canvas oraz modal z bootstrapa

Wed, 05 Apr 2023 17:34:07 +0000

Cześć

Mam mega duży problem, ponieważ chce wyświetlić coś napisane w Canvas(jest to wyświetlacz z sterownika w formie aplikacji webowej) lecz gdy chce go wyświetlić w modal z boostrapa, nie pojawiają się znaki na wyświetlaczu, jak by coś zakłucało.

Powinno być tak jak na stronie...

pasek nawigacji w bootstrap

Tue, 04 Apr 2023 19:26:41 +0000

Siemka, nie wiem dlaczego ale pasek nawigacji jak sie rozwinie to nie idzie go juz zwinąć spowrotem. Pisze wszystko tak jak jest podane w bootstrapie i nie działa, nie mam pojęcia z czego to wynika

 <nav class="navbar navbar-dark  navbar-expand-lg bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#pasekNawigacji"><span
                    class="navbar-toggler-icon"></span></button>
        </div>
        <div class="collapse navbar-collapse" id="pasekNawigacji">
            <div class="navbar-nav">
                <a class="nav-link" aria-current="page" href="#">home</a>
                <a class="nav-link" href="#">about</a>
                <a class="nav-link" href="#">conntact</a>

            </div>
        </div>
    </nav>

Formularz w Bootsrtap

Mon, 03 Apr 2023 20:36:27 +0000

Siemka, ćwiczę sobie tworzenie formularzy w bootstrapie i nie wiem jak zrobić przerwę między przyciskiem a tym co jest powyżej bo jak na razie nie ma tam żadnej przerwy i przycisk jest przyklejony górą

mam nadzieję, że ktoś mnie nakieruje i pomoże rozwiązać mój problem

 <div class="container">
 <form action="some name">
 <div class="row">
                    <div class="form-group col-xl-4">
                        <label for="text">write somethink</label>
                        <input type="text" class="form-control" id="text" placeholder=".........">
                    </div>
                    <div class="form-group col-xl-4">
                        <label for="state">State</label>
                        <select class="form-select" name="state" id="state">
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                        </select>
                    </div>
                    <div class="form-group col-xl-4">
                        <label for="text">write somethink</label>
                        <input type="text" class="form-control" id="text2" placeholder="........">
                    </div>
                </div>
                <button type="submit" class="btn btn-success">click me</button>
</form>
</div>

Jak pozbyć się przestrzeni między obrazami z pomocą Bootstrap'a???

Mon, 27 Mar 2023 21:15:03 +0000

Hejka zaczęłam uczyć się posługiwania z Bootstrap'a i dodałam trzy obrazy na strone, nie mam jednak pojęcia jak pozbyć się wolnych przestrzeni między nimi tak aby były przyklejone do siebie - jeden obok drugiego.

class="no-gradient" nie działa :/

<div class="container">
<div class="row">
<img class="img-fluid" src="....... "
alt="">
<img class="img-fluid" src="....... "
alt="">
<img class="img-fluid" src="....... "
alt="">
</div>
</div>

Bootstrap 4.6 - problem z containerem na wersji mobilnej strony

Fri, 13 Jan 2023 20:09:41 +0000

Cześć, mam takie kody:

<section class="subhero pt-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6 laptops_image pr-md-5">
                <img src="img/laptops.png" alt="" class="img-fluid">
            </div>
            <div class="col-md-6 position-relative">
                <div class="subhero_text position-absolute pl-md-5">
                    <h2>Lorem ipsum</h2>
                    <div class="rectangle_orange"></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum lectus enim, in eleifend ipsum varius ut. </p>
                </div>
            </div>
        </div>
    </div>
</section>

i CSS:

.subhero {
    background: #EFA99F;
}
 
.subhero .subhero_text h2 {
    font-weight: 600;
    font-size: 3.4rem;
    color: #021483;
}
 
.subhero .subhero_text p {
    font-weight: 500;
    font-size: 1.5rem;
    color: #021483;
}
 
.subhero .subhero_text {
    left: 0;
    top: 30%;
}
 
.laptops_image img {
    width: 100%;
    height: 100%;
}

Problem pojawia się, gdy testuje stronę na urządzenia mobilne, wtedy tekst z subhero "wychodzi" z containera i się nie pokazuje (nie umiem dobrze opisać problemu, więc zrobiłem rysunek poglądowy: https://imgur.com/a/XK7dicv). Z góry dziękuję za pomoc.

Usunięcie odstępów między kolumnami w bootstrapie

Sun, 08 Jan 2023 21:39:57 +0000

Cześć, próbuje ustawić w taki sposób divy w by były one ułorzone w kwadrat bez odstępu, lecz za bardzo mi nie idzie.

<div class="image col-lg-4 col-md-6">
  <div class="row no-gutters">
    <div class="col-6"><img src="img/" width="100" height="100"></div>
    <div class="col-6"><img src="img/" width="100" height="100"></div>
  </div>
  <div class="row no-gutters">
    <div class="col-6"><img src="img/" width="100" height="100"></div>
    <div class="col-6"><img src="img/" width="100" height="100"></div>
  </div>
</div>

Pionowe centrowanie elementów Bootstrap 5

Wed, 28 Dec 2022 13:25:54 +0000

Cześć!

Mam mały problem z bootstrapem.
Otóż mam dwie kolumny i chciałbym w nich pionowo wycentrować tekst.

https://codepen.io/piotr-wawrze/pen/GRBoYvv

vertical-align niestety, ale nie działa tak samo jak same klasy od bootstrapa ;)

Jakieś podpowiedzi?

Rejestracja domeny

Wed, 14 Dec 2022 12:52:37 +0000

Hej, będę przystępował do wykupu domeny dla mojego małego biznesu. Strona firmy nie będzie wymagająca - podstawowe informacje o firmie, kilka zdjęć, kontakt i to w sumie tyle, bez podstron. Mam zrobioną już taką podstawową stronę na bootstrapie 5 i chciałbym móc w miarę łatwo ją wrzucić na domenę.

Chciałbym dowiedzieć się z jakiej strony najlepiej kupić domenę, gdzie najłatwiej będzie mi wrzucić takie pliki html, css, js?
Czy warto dopłacić do jakiś dodatkowych opcji?
Czytałem coś o wordpressie ale to chyba w moim przypadku zbędne

Kafelki html

Fri, 09 Dec 2022 20:08:40 +0000

Cześć, mam do was pytanie i prośbę czy wie ktoś, jak zrobić takie kafelki z wymienianą „ekipą” w HTML? Szukam już dosyć długi czas w internecie poradników, ale nie mogę znaleźć pomoże ktoś?

Chodzi o kafelki ze strony https://bfsmc.pl/

Accordion Boostrap 5 nie działa na komórkach i tabletach

Mon, 05 Dec 2022 20:06:32 +0000

Witam szanowne grono.

Tworzę stronę internetową wpartą na WordPress z motywem edytowanym w kodzie i na podstronie użyłem accordion z Bootstrap 5. Od pewnego momentu zauważyłem, że nie wyświetla tekstu po kliknięciu w accordion na urządzeniach mobilnych. Macie jakieś pomysły, co mogłoby się stać, że nie działa?

Poniżej znajduje się przykładowy accordion. Wykorzystuję też kilka (np. 10x) accordion-item w jednym accordionie.

<div class="accordion" id="accordionExample">
                    <!-- Start Item 1 (Topic 9) -->
                    <div class="accordion-item">
                        <div class="accordion-header" id="headingQA-Thirty-Eight">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseQA-Thirty-Eight" aria-expanded="true"
                                aria-controls="collapseQA-Thirty-Eight">
                                <div class="heading-text"><?php the_field('qa_question_9'); ?></div>
                                <div class="accordion-btn">
                                    <div class="icon"><?php the_field( 'icon' ); ?></div>
                            </button>
                        </div>
                        <div id="collapseQA-Thirty-Eight" class="accordion-collapse collapse"
                            aria-labelledby="headingQA-Thirty-Eight" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p><?php the_field('qa_content_9'); ?></p>
                            </div>
                        </div>
                    </div>
                    <!-- End Item 1 (Topic 9) -->
                </div>

PS. Nie wiem, czy to ważne, ale wcześniej musiałem osobno dodać:

<meta name="viewport" content="width=device-width, initial-scale=1">

do head na tej podstronie, co niedziałający accordion na urządzeniach mobilnych, chociaż miałem import head ze strony głównej przy pomocy:

<?php wp_head(); ?>

Z góry dziękuję za rady :D

Bootstrap - drop menu w czystym css i htmlu nie działa.

Wed, 30 Nov 2022 10:11:40 +0000

Cześć, mam problem ze swoją stroną, którą robię jako projekt zaliczeniowy. Zrobiłem w navie dropmenu w czystym htmlu i css. Ale w innym divie, chce użyć bootstrapa. Po dodaniu skryptu bootstrapa do swojego projektu, dropmenu nagle przestaje działać. Wiem, że ma na to wpływ bootstrap, czy ktoś wie co powinienem zmienić, żeby dropmenu działało tak samo jak przed dodaniem bootstrapa. Załączam poniżej kod, navbar o którym mowa to ten z klasą .third_nav

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      document
    </title>
    <link rel="stylesheet" href="test.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous" />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="third_nav">
      <div class="dropdown left_side">
        <button class="dropbtn">
          UCZELNIA
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          WYDZIAŁY
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          INSTYTUTY
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 4</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          JEDNOSTKI
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          <b id="rekru">REKRUTACJA</b>
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>

      <a href="" class="element">STUDENT</a>
      <a href="" class="element">PRACOWNIK</a>
      <a href="" class="element">WSPÓŁPRACA MIĘDZYNARODOWA</a>
      <a href="" class="element">KONTAKT</a>
    </div>
    <div class="break_div"></div>
    <div class="photo_container">
      <a href="" id="a_rekrutacja"
        ><img src="img/baner.jpg" id="img_rekrutacja" alt="info_baner"
      /></a>
    </div>
    <div class="news">
      <div class="card_1" style="width: 18rem">
        <img src="img/news_1.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Dla kandydata</h2>
          <p class="card-text">Oferta edukacyjna</p>
          <a href="#" class="btn btn-primary"
            >Dowiedz się więcej o ofercie edukacyjnej</a
          >
        </div>
      </div>
      <div class="card_2" style="width: 18rem">
        <img src="img/news_2.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Dla studenta</h2>
          <p class="card-text">Informacje dla studentów</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej</a>
        </div>
      </div>
      <div class="card_3" style="width: 18rem">
        <img src="img/news_3.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Erasmus+</h2>
          <p class="card-text">Studiuj za granicą</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej o Erasmus+</a>
        </div>
      </div>
      <div class="card_4" style="width: 18rem">
        <img src="img/news_4.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Executive MBA</h2>
          <p class="card-text">Zapisz się na studia</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej o studiach</a>
        </div>
      </div>
    </div>
    <div class="updates">
      <h2>Aktualności</h2>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  background-color: #fff;
  font-family: roboto, sans-serif;
  overflow-x: hidden;
}

/**/

.first_list_element a,
.second_list_element a,
.third_list_element a {
  text-decoration: none;
  color: black;
}

.first_list_element,
.second_list_element,
.third_list_element {
  list-style-type: none;
}

/*third nav*/

.third_nav {
  overflow: hidden;
  background-color: #00458c;
  height: 4rem;
  text-align: center;
  float: left;
  width: 100%;
}

/* Links inside the navbar */
.third_nav a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Left Side*/
.left_side {
  margin-top: 0.5rem;
}

/*Elementy bez dropmenu*/
.element {
  position: relative;
  top: 0.5rem;
  margin-left: 1.5rem;
}

/*Element Rekrutacja*/

#rekru {
  text-decoration: underline;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  margin-left: 2rem;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.third_nav a:hover,
.dropdown:hover .dropbtn {
  border: 2px dotted red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/*break par*/
.break_div {
  clear: both;
  height: 5rem;
  background-color: white;
}

/*img section*/

.photo_container {
  object-fit: cover;
  width: 100%;
}

#img_rekrutacja {
  object-fit: cover;
  width: 100%;
}

/*news section*/
.news {
  margin: 3rem;
  position: relative;
  left: 4rem;
}

.card_1,
.card_2,
.card_3,
.card_4 {
  float: left;
  text-align: center;
  margin-right: 3rem;
}

.btn {
  width: 100%;
}

.card-body {
  margin-top: 1.5rem;
}

.card-text {
  margin-top: 3rem;
}

/*update section*/
.updates {
  float: left;
  margin-top: 3rem;
}

Instalacja pakietu bootstrapa przez nodejs

Sun, 09 Oct 2022 22:01:28 +0000

Dodałem pakiet bootstrapa do swojego folderu z projektem

przy próbie uruchomienia serwera terminal zwraca błędy

Jak to naprawić?

Brak marginesu w elemencie o klasie nav-item [BOOTSTRAP]

Fri, 12 Aug 2022 20:54:05 +0000

Gdy klikam w toggler moje menu wygląda tak

nie wiem skąd brak tych marginesów. Czy coś jest nie tak w kodzie? Czy powinienem te marginesy dodać w css?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stay Fluent - Start</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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>
<body class="min-vh-100 bg-secondary">

    <div class="vh-100 w-100">

        <header class="bg-dark text-light d-flex p-2 position-sticky top-0 start-0">

            <div class="logo text-center py-3">LOGO.PNG</div>

            <nav class="navbar navbar-expand-md">
            <div class="collapse navbar-collapse bg-dark" id="nav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="index.php" class="nav-link text-light">Start</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Ciekawostki</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Metody Nauki</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Artykuły</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Kategorie</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Kontakt</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">O mnie</a></li>
                </ul>
            </div>
            <button class="navbar-toggler bg-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Przełącznik Nawigacji">
                <span class="navbar-toggler-icon"></span>
              </button>
            </nav>

        </header>

        <main>

            <div class="cards container">

                <div class="row justify-content-center">

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                </div>

                <div class="row justify-content-center">

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                    <div class="card bg-info m-3 col-md-3">

                        <img src="img/girl.jpg" class="card-img-top" alt="">

                        <div class="card-body">
                            
                            <h5 class="card title p-1">The Girl</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac ex sed odio rhoncus sagittis.</p>
                            <a href="https://www.lipsum.com/feed/html" class="btn btn-primary">Czytaj dalej</a>
                        </div>
                        
                    </div>

                </div>

            </div>

        </main>

    </div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

header
{
    height: 70px;
    z-index: 100;
}
.logo
{
    width: 250px;
}

Bootstrap stylizacja menu oraz wyszukiwarki

Fri, 10 Jun 2022 07:29:43 +0000

Cześć otrzymałem zadanie, z którym mam delikatne problemy "Na tabletach wyszukiwanie ma być pod menu, a na mniejszych ekranach ma być wyszukiwanie i obok niego ikona mobilnego menu, które po rozwinięciu ma pokazywać dropdown przykrywający treść strony. "

Oto kod:

 <div className={styles.root}>
    <div className='container'>
      <div className='row align-items-center d-xs-inline-flex '>
        <div className={'col-sm-6 order-sm-2'}>
          <ProductSearch />
        </div>
        <div className={'col-sm-6  ' + styles.menu}>
          <ul>
            <li>
              <a href='#' className={styles.active}>
                Home
              </a>
            </li>
            <li>
              <a href='#'>Furniture</a>
            </li>
            <li>
              <a href='#'>Chair</a>
            </li>
            <li>
              <a href='#'>Table</a>
            </li>
            <li>
              <a href='#'>Sofa</a>
            </li>
            <li>
              <a href='#'>Bedroom</a>
            </li>
            <li>
              <a href='#'>Blog</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

W momencie ustawienia `order-sm-2 dla ProductSearch` oraz `order-sm-1 dla drugiej kolumny` wszystko się sypie. Podobnie jest, gdy próbuję ustawić dropmenu dla menu. Proszę o podpowiedź.

Strony na bootstrapie

Wed, 25 May 2022 10:51:33 +0000

Gdzie mógłbym poszukać osób, które zajmują się robieniem stron na bootstrapie?

Label class - Bootstrap - PHP

Fri, 13 May 2022 13:24:27 +0000

Witam,

Tworzę sobie od czasu do czasu jakieś stronki internetowe celem zdobycia praktyki. Ostatnio coś działam w bootstrapie i naszła mnie chęć zrobienia prostej tabeli z użyciem php'a oraz bazy danych. W oko wpadły mi eleganckie labele które postanowiłem dodać za pomocą bazy danych.

Wiersz tabeli HTML:

<tr>
  <td>admin</td>
   <td>7</td>
   <td>gdynia</td>
   <td>przyklad</td>
   <td>20 maj 2022</td>
   <td><label class="badge badge-warning">Wstrzymano</label></td>
</tr>

Stworzyłem więc ów tabelę i ku woli sprawdzenia ogólnej sprawności zapisania danych w tabeli za pomocą echo dostałem odpowiedz zwrotną przy próbie uruchomienia strony:

Parse error: syntax error, unexpected identifier "badge", expecting "," or ";" in D:\xampp\htdocs\index.php on line 372

Cała tabela:

<table class="table">
                        <thead>
                          <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                          </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>moderator</td>
                            <td>6</td>
                            <td>gdansk</td>
                            <td>przyklad</td>
                            <td>20 maj 2022</td>
                            <td><label class="badge badge-success">OK</label></td>
                          </tr>
                          <?php
                            echo "<tr>
                            <td>admin</td>
                            <td>7</td>
                            <td>gdynia</td>
                            <td>przyklad</td>
                            <td>20 maj 2022</td>
                            <td><label class="badge badge-success">Opłacono</label></td>
                          </tr>";
                          ?>
                        </tbody>
                      </table>

Po dodaniu wiersza w echo było dobrze, natomiast gdy dodałem ów label już się wysypało...

Proszę o wytłumaczenie problemu. Z góry dziękuje :)

Nałożenie koloru na obrazek

Tue, 19 Apr 2022 12:09:35 +0000

Witam,

Dodałem do strony obraz. W zadaniu mam dodać (nałożyć) na niego kolor w prawym górnym rogu w raz tekstem. Jednak po nałożeniu nie pojawia się kolor. Ustawiałem go bez psedo-elementu :before, jednak pojawiał się jako tło obrazku. Obrazek jest ustawiony za pomocą bootstrap.

Oto kod:

HTML

<div>
              <img
                src="images/coffee-1.png"
                class="rounded float-right pl-5"
                alt="coffee_1"
              />
            </div>

CSS

.products img {
  position: relative;
}

.products img::before {
  position: absolute;
  content: '';
  background-color: $background-color-beige;
  width: 100%;
  height: 100%;
  top: 15px;
  left: 15px;
}

Strona rozciąga tekst oraz pozostawia puste miejsca

Fri, 15 Apr 2022 15:08:07 +0000

Witam,

Staram się ustawić elementy na stronie za pomocą boostrap, część z nich jak np. navbar ustawiłem poprawnie jak również zdjęcie na "home page". Mam natomiast problem z tekstem który, powinien się znajdować na tym zdjęciu, nie poprawnie jest pod nim. Następnym problem mam z ustawieniem marginesów w jednej z sekcji, nie mogę ich odpowiednio wyrównać do środka, podobna sytuacja jest na tytułami sekcji. Stopka zajmuje nie wielką cześć, co jest akurat prawidłowe, jednak pod nią pojawia się pusta przestrzeń której nie powinno być. Przesyłam link do repozytorium.

Repozytorium strony

[BOOTSTRAP] Błąd w kodzie

Tue, 05 Apr 2022 12:04:17 +0000

Przycisk o klasie toggler nie reaguje na kliknięcie.

Wstawiam cały kod HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Polingua - Your Stats</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="fontello/css/fontello.css">
		<style>
			body
			{
				display: block;
				padding: 0;
			}
		</style>
		<link rel="stylesheet" href="fontello/css/fontello.css">
	</head>
	<body>
		<header>
			<nav class="navbar navbar-dark bg-primary navbar-expand-md">
				<a class="navbar-brands" href="stats.php"><img class="d-inline-block mx-2" width="40" height="40" src="logo.png">Polingua.com</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse" id="mainmenu">
					Tu narazie jest ściernisko...
				</div>
			</nav>
		</header>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</html>

dlaczego dostaje błąd skałdni echo<<<

Tue, 15 Mar 2022 23:54:19 +0000

Witajcie przerabiam tutorial (https://www.youtube.com/watch?v=sJsVoAZLa1Q) i nie wiem czemu nie chce mi to działać mam błąd składni tj

    <?php 
                
                $query = "SELECT * FROM `blog_1`";
                $result = mysqli_query($con,$query);
                $i=1;
                $fetch_src=FETCH_SRC;


                while($fetch=mysqli_fetch_assoc($result))
                {
                    echo<<<product
                        <tr class="algin-middle">
                            <th scope="row">$i</th>
                            <td><img src="$fetch_src$fetch[image]" width="150px"</td>
                            <td>$fetch[name]</td>
                            <td>$fetch[price]</td>
                            <td>$fetch[description]</td>
                            <td>
                            <a href="?edit=$fetch[id]" class="btn btn-warning me-2"><i class="bi bi-pencil-square" ></i></a>
                            <button onclick="confirm_rem($fetch[id])" class="btn btn-danger"><i class="bi bi-trash"></i></button>
                            </td>
                        </tr>
                        product;  <--tu mi podkreśla błąd czyli nie gra tu coś 
                    $i++;
                }            
                ?>

nie mogę odpalić

<div class="modal fade" id="editproduct" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">

        <form action="crud.php" method="POST" enctype="multipart/form-data">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edytuj Card</h5>
                    </div>
                    <div class="modal-body">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Name</span>
                            <input type="text" class="form-control" name="name" id="editname">
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Price</span>
                            <input type="number" class="form-control" name="price" id="editprice">
                        </div>
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">Description</span>
                        <textarea class="form-control" name="desc" id="editdesc"></textarea>
                    </div>
                    <img scr="" id="editimg" width="100%" class="mb-3"><br>
                    <div class="input-group mb-3">
                        <label class="input-group-text" for="inputGroupFile01">Image</label>
                        <input type="file" class="form-control" name="image" accept=".jpg, .png, .svg, .webp">
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Canel</button>
                        <button type="submit" class="btn btn-success" name="editproduct">Edit</button>
                    </div>
                </div>
        </form>
    </div>

może ktoś miał podobny problem z modal albo może jakieś nakierowanie jak wychwycić gdzie jest błąd

Alternatywy dla bootstrapa

Fri, 25 Feb 2022 14:00:48 +0000

Witam,
jak w tytule - poszukuję alternatywy dla bootstrapa. Jednak chodzi mi o coś głębszego. Szukam frameworka, który ułatwi tworzenie RWD, jednak zajmie się głównie zmianą ułożenia elementów przy skalowaniu, a cały CSS wyglądu pozostawił mi. Z tego co widzę te klasy bootstrapa nadają elementą z góry swoje style (nazwijmy je wizualne - chodzi mi o kolory itp). Moim subiektywnym zdaniem taka ilość klas jest po pierwsze nieschludna, a po drugie nieintuicyjna. Mam nadzieję, że dobrze opisałem mój problem.

Pozycjonowanie div'a w div'ie bootstrap.

Mon, 17 Jan 2022 10:29:07 +0000

Witam,

Ostatnio bawię się troszkę z php, jednak dałem się pokonać przyciskowi ostylowanego w bootstrapie.

Miaonwicie chodzi o to że przycisk posiada rozwijaną listę, która wychodzi poza stronę. W tym celu chcialbym przenieść pozycje listy względem przycisku. Ustawianie poz. relatywnej dla div rodzica (przycisku) a poz. absolutnej dla div listy (dziecka) nie pomaga...

W celu lepszego zrozumienia mnie edytowałem zawartość w programie graficznym i zależy mi na tym ażeby wyglądało to mniej więcej w taki sposób:

  <div class="dropdown" style="position: relative;">
  <button class="btn btn-danger dropdown-toggle" type="button" id="przykladowaListaDanger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <img src="img/user1.png" width="25px"> 
  <?php
echo "tekst";
  ?>
  </button>
  <div class="dropdown-menu" style="position: absolute; right: 30px;" aria-labelledby="przykladowaListaDanger">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="logout.php">Wyloguj się</a>
  </div>
</div>

Responsywny Background attachment zdjęcie strony przypięte do sekcji

Sat, 30 Oct 2021 15:33:27 +0000

Mam następujący kontener:

  <section class="invite"style="z-index: 2;" id="">
        <div class="d-flex" >
              <div class="row">
                <div class="col-sm  d-flex align-items-center rel">
                  <div class="blog col-sm  d-flex align-items-center"></div>
                  </div>
      
                  <div class="col-sm d-flex align-items-center">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio expedita autem beatae ratione nam obcaecati amet vero qui corrupti. Magni quaerat vero molestiae. Unde obcaecati dolorem ipsam, aliquam animi minus minima! Explicabo quo accusantium neque architecto reprehenderit labore, voluptate temporibus sapiente doloribus iste fugiat, delectus eveniet corporis ipsa quibusdam sed porro! Labore porro voluptatibus cumque illo aspernatur earum tempora atque amet dignissimos totam in voluptas fugiat enim autem sapiente, exercitationem saepe ipsa, laboriosam provident. Delectus illum fugit blanditiis velit nulla deleniti excepturi tenetur perferendis, sequi omnis ipsum incidunt asperiores natus laudantium eveniet dignissimos, iusto qui soluta id exercitationem maiores repellendus?
                  </div>
              </div>
        </div>
    </section>



  <section class="invite"style="z-index:3;" id="">

      <div class="d-flex" >

        <div class="row">
          

            <div class="col-sm d-flex align-items-center">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis dolor, ullam recusandae porro, suscipit pariatur ipsa soluta libero deleniti placeat, praesentium consequuntur. Similique enim nihil ad, accusantium consequatur iste. Amet asperiores voluptatum, distinctio corrupti sapiente fugiat deleniti odit dolor accusamus animi ipsum esse, laborum alias iusto ullam consequatur. Sint facilis, corporis numquam culpa molestiae illum placeat voluptate, tempora cumque asperiores minima earum ea, perferendis omnis similique. Corrupti unde eos voluptate officiis nihil dicta atque consequuntur temporibus illum expedita explicabo id, corporis itaque quos vitae distinctio! Saepe et dolores harum laboriosam, nihil neque ea necessitatibus quidem maiores consectetur tenetur dolorum tempora?
            </div>
            <div class="col-sm  d-flex align-items-center rel">
              <div class="shop col-sm  d-flex align-items-center"></div>
            </div>
        </div>
        
    </div>
    </section>

nadałem klase która jest czarnym kwadratem prostokątek itd i jest ten tekst w środku

.blog{
    display: flex;
    align-items: center;
    justify-content:center;
    width:100%;
    height:60vh;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../../../public/assets/strona.png');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size:contain;
    z-index: 2;

}

po pierwsze nie mogę tego wycentrować po szerokości i zdjęcie strony ustawia się do lewej, po drugie to zdjęcie nie jest prawie wcale responsywne przy dwóch kolumnach. Zna ktoś sposób stylowania tego? Chciałbym mieć tam zdjęcie strony które jest attachment przy scrollowaniu i jest ustawione dokładnie w środku a przy dwóch kolumnach. Bardzo mało informacji jest na ten temat w internecie,

Bootstrap zmiana domyślnej wielkości składania hamburgera

Sun, 26 Sep 2021 00:53:46 +0000

Ja mam takie pytanie. Rozwiązałem swój problem z przyciskiem który zasłania menu, ale może istnieje możliwość na składanie menu przy innej szerokości ekranu przy użyciu bootstrapa.
Domyślnie hamburger pojawia mi się przy >1200px Czy tą wartość można zmienić? Jeżeli tak to gdzie? Dodam że mam zainstalowaną biblioteke przez npm. Więc nie jest to arkusz zaciągający jakiegoś CDNa czy coś podobnego.

Wyrównanie wysokości media object w boostrap

Sat, 04 Sep 2021 19:29:48 +0000

Witam
Istnieje w boostrap jakaś klasa żeby każdy obiekt miał taką samą wysokość niezależnie od tekstu? Ostatnio ogarnąłem grid i flex ale może boostrap ma już jakąś funkcję wbudowaną :) Dokumentację przeszukałem ale nic mi w oczy nie wpadło.

mój kod
https://codepen.io/wixser/pen/rNwMGMM

Z góry wielkie dzięki :)

Bootstrap 5 nowe sposoby na puste linki

Thu, 12 Aug 2021 00:20:00 +0000

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mam odnośnie fragmentu pytanie, dlaczego tutaj zamiast znanego mi hasha są "..." ? Czy to nowy sposób na puste linki i znacznik nie wpływający na przeładowanie strony?

zdjęcia bootstrap równe wysokości

Mon, 09 Aug 2021 19:27:01 +0000

Cześć

Ma ktoś pomysł jak zrobić aby zdjęcia na stronie były równej wysokości nie tracąc przy tym na jakości zdjęcia ?
screen

<div class="container">
    <div class="row">
        <div class="col">
            <img src="~/img/img1.jpg" class="img-fluid" />
        </div>
        <div class="col">
            <img src="~/img/img2.jpg" class="img-fluid" />
        </div>
        <div class="col">
            <img src="~/img/img3.jpg" class="img-fluid"/>
        </div>
    </div>
</div>

Bootstrap v5 - formularz kontaktowy i Bootstrap icon

Fri, 23 Jul 2021 07:06:40 +0000

Dzień dobry,

Już się pogubiłem. Jak zrobić żeby wszystkie wpisane dane zostały wysłane na wskazany email. I jak zrobić żeby ikony w drugim divie ustawiły się na środku po osi y względem tego pierwszego diva?

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>#</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e8f4ff;">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link " aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="autorPL.html">O autorze</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="kontakt.html">kontakt</a>
                    </li>
                </ul>
            </div>
            <a class="navbar-brand">#</a>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <form action="mailto:radekleszekbudnik@gmail.com" method="post">
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Imię</label>
                        <input type="tekst" class="form-control" id="exampleFormControlInput1"
                            placeholder="Jan">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Nazwisko</label>
                        <input type="tekst" class="form-control" id="exampleFormControlInput1"
                            placeholder="kowalski">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Adres Email</label>
                        <input type="email" class="form-control" id="exampleFormControlInput1"
                            placeholder="name@example.com">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlTextarea1" class="form-label">Treść</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary" type="submit">Submit form</button>
                    </div>
                </form>
            </div>
            <div class="col-md-2">
                <div class="col">
                    <a href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                            class="bi bi-facebook" viewBox="0 0 16 16">
                            <path
                                d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                        </svg>
                    </a>
                </div>

                <div class="col mt-5">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                            class="bi bi-instagram" viewBox="0 0 16 16">
                            <path
                                d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                        </svg>
                    </a>
                </div>

                <div class="col mt-5">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                            class="bi bi-twitter" viewBox="0 0 16 16">
                            <path
                                d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <footer class="main-footer fixed-bottom">
        <div class="row">
            <div class="col-sm">
                <p class="text-center">#</p>
            </div>
        </div>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>

    <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>

Umieszczenie stopki bootstrap v5.

Thu, 22 Jul 2021 15:07:48 +0000

Dzień Dobry,

Mam problem z umiejscowienie stopki na stronie. Mianowicie chciałbym żeby stopka była przyklejona na dole strony, nie do treści zawartej na stronie. Urzywam Bootstrtapa w wersji 5.

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>#</title>

  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e8f4ff;">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="autorPL.html">O autorze</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="kontakt.html">Kontak</a>
          </li>
        </ul>
      </div>
      <a class="navbar-brand">#</a>
    </div>
  </nav>

  <div class="container m-auto mt-4">
    <div class="row">
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>

  </div>


  <footer class="main-footer">
    <div class="row">
      <div class="col-sm">
        <p class="text-center">&copy; by Radosław Budnik 2021</p>
      </div>
    </div>
  </footer>


  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>

  <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>

Boostrap - grid

Wed, 21 Jul 2021 08:58:22 +0000

Mam pytanko: czy da się zrobić w bootstrap grid 3 zrobić taki układ?